如何仅在首次加载时随机化Algolia Vue InstantSearch搜索结果？

要实现仅在首次无用户交互时随机化搜索结果，核心是通过状态变量判断用户是否执行过搜索、筛选操作，从而控制是否启用随机逻辑。以下是具体实现步骤：

1. 定义交互状态变量 #

在Vue组件的data中新增一个变量，用于标记用户是否有过交互行为：

data() {
  return {
    hasUserInteracted: false // 初始为false，代表无交互
  }
}

2. 监听用户交互行为 #

通过两种方式监听用户的搜索、筛选操作，一旦触发就将hasUserInteracted设为true：

方式一：直接绑定组件事件 #

针对页面上的搜索框、分类选择器、筛选列表等组件，绑定对应的交互事件：

<!-- 搜索框：输入时标记交互 -->
<ais-search-box @input="markUserInteracted"></ais-search-box>

<!-- 分类选择器：选择分类时标记交互 -->
<ais-menu attribute="category" @change="markUserInteracted"></ais-menu>

<!-- 筛选列表：选择选项时标记交互 -->
<ais-refinement-list attribute="tags" @change="markUserInteracted"></ais-refinement-list>

然后在methods中实现标记方法：

methods: {
  markUserInteracted() {
    this.hasUserInteracted = true;
  }
}

方式二：监听InstantSearch状态变化（更健壮） #

如果页面上筛选组件较多，直接监听InstantSearch的全局状态变化更高效，无需逐个组件绑定事件：

<ais-instant-search
  :search-client="searchClient"
  index-name="你的索引名"
  @update:state="handleStateUpdate"
>
  <!-- 其他组件内容 -->
</ais-instant-search>

对应的状态处理方法：

methods: {
  handleStateUpdate(newState) {
    // 判断是否存在搜索词或筛选条件
    const hasQuery = !!newState.query;
    const hasRefinements = Object.keys(newState.refinements).some(key => newState.refinements[key].length > 0);
    
    if (hasQuery || hasRefinements) {
      this.hasUserInteracted = true;
    }
  }
}

3. 修改随机化逻辑 #

调整transform-items绑定的方法，根据hasUserInteracted的值决定是否执行随机：

methods: {
  // 其他方法...
  shuffleItems(items) {
    // 有用户交互时，直接返回Algolia原权重排序的结果
    if (this.hasUserInteracted) {
      return items;
    }
    // 无交互时，随机化结果数组
    return [...items].sort(() => Math.random() - 0.5);
  }
}

最后将方法绑定到ais-hits组件：

<ais-hits :transform-items="shuffleItems">
  <!-- 你的结果模板 -->
</ais-hits>

效果说明 #

• 页面首次加载、无搜索词/筛选条件时，结果会被随机化展示；
• 一旦用户输入搜索词、选择分类或筛选选项，后续所有结果都会保持Algolia的权重排序，即使清空搜索词或重置筛选，也不再触发随机化（若需要重置后重新随机，可在重置按钮事件中手动将hasUserInteracted设为false）。

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