如何在Vue 3中动态设置Vue InstantSearch的索引名称？

你需要在App.vue中通过props接收从main.js传入的section参数，再动态绑定到ais-instant-search的index-name属性上，具体操作如下：

步骤1：在App.vue中声明props接收参数 #

在组件的选项配置里添加props，明确要接收section参数：

export default {
  components: {
    AisPagination, AisMenuSelect
  },
  // 新增props定义
  props: ['section'],
  data() {
    return {
      searchClient: algoliasearch('xxxxxx','yyyyyy'),
    };
  },
  methods: {},
};

步骤2：动态绑定index-name属性 #

将ais-instant-search的index-name改为动态绑定形式，把参数值传递进去：

<ais-instant-search
  :search-client="searchClient"
  :index-name="section"
>
…
</ais-instant-search>

完整的App.vue代码示例 #

<ais-instant-search
  :search-client="searchClient"
  :index-name="section"
>
<!-- 你的搜索组件内容 -->
  <ais-pagination></ais-pagination>
  <ais-menu-select></ais-menu-select>
</ais-instant-search>

<script>
import algoliasearch from 'algoliasearch/lite';
import 'instantsearch.css/themes/algolia-min.css';
import { AisPagination, AisMenuSelect } from 'vue-instantsearch/vue3/es';

export default {
  components: {
    AisPagination, AisMenuSelect
  },
  props: ['section'],
  data() {
    return {
      searchClient: algoliasearch('xxxxxx','yyyyyy'),
    };
  },
  methods: {},
};
</script>

原理说明：你在main.js中通过createApp(App, { section: container.dataset.section })传入的对象，本质是根组件的props数据，只要在App.vue中声明对应的props，就能直接在模板和组件逻辑中使用该参数。

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