如何在Vue中通过布尔值和日期过滤Algolia结果并同步nbHits？

你当前通过transformItems在前端过滤结果的方式，只会修改最终展示的条目，但不会改变Algolia服务端返回的原始nbHits（这个值统计的是未经过前端过滤的总结果数），所以才会出现内容和数量不匹配的情况。正确的做法是把过滤条件交给Algolia服务端处理，这样返回的结果和nbHits都会是过滤后的正确值。

Vue中的具体实现方式 #

假设你使用的是官方的vue-instantsearch库，通过以下步骤配置服务端过滤：

1. 确保字段可过滤：先登录Algolia后台，进入你的索引配置页面，在「Facets」→「Filtering attributes」中添加enabled和time_of_use_unix两个字段，让服务端支持对它们的过滤。

2. 在Vue组件中配置过滤参数：

<template>
  <ais-instant-search :search-client="searchClient" index-name="你的索引名称">
    <!-- 搜索框、结果展示等组件 -->
    <ais-configure :filters="generateFilters()" />
    <ais-hits>
      <template #item="{ item }">
        <!-- 你的结果渲染模板 -->
      </template>
    </ais-hits>
    <ais-stats /> <!-- 这里的nbHits会正确显示过滤后的数量 -->
  </ais-instant-search>
</template>

<script>
import algoliasearch from 'algoliasearch';
import { AisInstantSearch, AisConfigure, AisHits, AisStats } from 'vue-instantsearch';

export default {
  components: {
    AisInstantSearch,
    AisConfigure,
    AisHits,
    AisStats
  },
  data() {
    return {
      searchClient: algoliasearch('你的AppID', '你的搜索API密钥')
    };
  },
  methods: {
    generateFilters() {
      // 获取当前时间戳（和moment().unix()效果一致）
      const currentUnix = Math.floor(Date.now() / 1000);
      // 构造Algolia过滤表达式，多条件用AND连接
      return `enabled = 1 AND time_of_use_unix >= ${currentUnix}`;
    }
  }
};
</script>

原理说明 #

这种方式是把过滤条件直接发送给Algolia服务端，由服务端在返回结果前完成筛选，所以返回的nbHits就是符合条件的结果总数，展示内容和数量会完全匹配，同时也能减少前端需要处理的数据量，提升性能。

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