Vue 3中使用移动端切换按钮时Algolia Instant Search筛选状态被重置

核心问题排查 #

1. Vue版本语法不兼容：你的代码混用了Vue 3的ref语法，但引入的是Vue 2.5.17，版本冲突会导致状态管理异常。
2. 组件实例未被缓存：自定义HierarchialMenu组件在隐藏/显示时可能被重建，导致Algolia筛选器状态丢失。

具体修复步骤 #

1. 统一Vue版本语法

如果继续使用Vue 2，改用Vue 2的选项式状态管理：

export default {
  data() {
    return {
      closeFilter: true,
      hierarchicalMenuOpen: false
    };
  },
  methods: {
    toggleFilter() {
      this.closeFilter = !this.closeFilter;
      this.hierarchicalMenuOpen = !this.hierarchicalMenuOpen;
      document.body.classList.toggle("overflow-hidden");
    }
  }
};

如果升级到Vue 3，更新CDN引用：

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

2. 用<keep-alive>缓存筛选组件

通过<keep-alive>包裹HierarchialMenu，确保组件实例在隐藏时不会被销毁，保留筛选状态：

<keep-alive>
  <HierarchialMenu v-show="hierarchicalMenuOpen" />
</keep-alive>

3. 简化子组件传参

不要将hierarchicalMenuOpen作为props传入子组件，父组件直接控制显示即可，避免props变化触发子组件不必要的重渲染：

<!-- 父组件代码 -->
<div>
  <button @click="toggleFilter" class="filter-search-btn">
    <span>
      <i :class="closeFilter ? 'fal fa-filter' : 'fal fa-times'"></i>
      {{ closeFilter ? 'Filter' : 'Close' }}
    </span>
  </button>
  
  <keep-alive>
    <HierarchialMenu v-show="hierarchicalMenuOpen" />
  </keep-alive>
</div>

4. 确保InstantSearch实例绑定正确

确认ais-hierarchical-menu被包裹在ais-instant-search根组件内，筛选状态由Algolia全局管理，而非组件局部状态：

<ais-instant-search
  :search-client="searchClient"
  index-name="你的索引名称"
>
  <!-- 其他搜索组件 -->
  <HierarchialMenu v-show="hierarchicalMenuOpen" />
</ais-instant-search>

内容的提问来源于stack exchange，提问作者Parit Sawjani