如何捕获Algolia InstantSearch的搜索重置事件？

针对你遇到的搜索重置后Vuex中selectedItems数组未同步清空的问题，给你两个实用的解决方案：

方案一：监听搜索状态变化（通用场景） #

搜索重置的本质是查询词（query）被清空，你可以通过InstantSearch的onStateChange钩子监听状态变化，当query从非空变为空时，触发Vuex的清空操作。

实现代码 #

Vue 2（Options API）

<template>
  <instant-search 
    :search-client="searchClient" 
    index-name="your-index-name"
    :on-state-change="handleSearchStateChange"
  >
    <!-- 你的搜索组件（搜索框、无限滚动结果等） -->
  </instant-search>
</template>

<script>
export default {
  methods: {
    handleSearchStateChange(prevState, nextState) {
      // 检测query从有值变为空的状态，判定为搜索重置
      if (prevState.query && !nextState.query) {
        this.$store.dispatch('clearSelectedItems');
      }
    }
  }
}
</script>

Vue 3（Composition API）

<template>
  <instant-search 
    :search-client="searchClient" 
    index-name="your-index-name"
    :on-state-change="handleSearchStateChange"
  >
    <!-- 你的搜索组件 -->
  </instant-search>
</template>

<script setup>
import { useStore } from 'vuex';
const store = useStore();

const handleSearchStateChange = (prevState, nextState) => {
  if (prevState.query && !nextState.query) {
    store.dispatch('clearSelectedItems');
  }
};
</script>

这个方案能覆盖所有触发搜索重置的场景（比如点击叉号、手动删除所有输入后回车），兼容性更强。

方案二：自定义搜索框，绑定叉号点击事件 #

如果只需要针对点击搜索框叉号的场景，你可以自定义search-box的模板，给清空按钮直接绑定清空selectedItems的操作：

<template>
  <search-box>
    <template #default="{ currentRefinement, refine, clear }">
      <input
        type="text"
        :value="currentRefinement"
        @input="refine($event.target.value)"
        placeholder="搜索物品..."
      />
      <!-- 自定义清空按钮，同时执行InstantSearch的clear和Vuex清空操作 -->
      <button 
        v-if="currentRefinement"
        @click="() => { clear(); $store.dispatch('clearSelectedItems'); }"
        aria-label="清空搜索"
      >
        ×
      </button>
    </template>
  </search-box>
</template>

这里的clear()是InstantSearch提供的官方方法，负责清空查询词并触发搜索重置，我们在同一点击事件里同步调用Vuex的action，保证状态一致。

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