Vue3全局配置Typesense连接并跨组件访问searchClient

步骤1：在main.js中整合Typesense配置并全局提供searchClient #

把Typesense适配器的初始化代码加入main.js，并通过Vue的provide方法将生成的searchClient全局共享：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router';
import OneSignal from 'onesignal-cordova-plugin';
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import VueApexCharts from "vue3-apexcharts";
import InstantSearch from 'vue-instantsearch/vue3/es';
import { IonicVue } from '@ionic/vue';
// 导入Typesense适配器
import TypesenseInstantSearchAdapter from "typesense-instantsearch-adapter";

/* 样式导入部分保持不变 */
import '@ionic/vue/css/core.css';
import '@ionic/vue/css/normalize.css';
import '@ionic/vue/css/structure.css';
import '@ionic/vue/css/typography.css';
import '@ionic/vue/css/padding.css';
import '@ionic/vue/css/float-elements.css';
import '@ionic/vue/css/text-alignment.css';
import '@ionic/vue/css/text-transformation.css';
import '@ionic/vue/css/flex-utils.css';
import '@ionic/vue/css/display.css';
import './theme/variables.css';

// 初始化Typesense适配器
const typesenseInstantsearchAdapter = new TypesenseInstantSearchAdapter({
  server: {
    apiKey: "你的实际API密钥", // 替换为真实密钥
    nodes: [
      {
        host: "example.com", // 替换为你的Typesense服务器地址
        path: "",
        port: "8108",
        protocol: "https",
      },
    ],
    cacheSearchResultsForSeconds: 2 * 60,
  },
  additionalSearchParameters: {
    query_by: "title,region,location,search_data"
  },
});
const searchClient = typesenseInstantsearchAdapter.searchClient;

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

const app = createApp(App)
  .use(IonicVue)
  .use(router)
  .use(VueApexCharts)
  .use(InstantSearch)
  .use(pinia);

// 全局提供searchClient，供所有组件注入使用
app.provide('searchClient', searchClient);

router.isReady().then(() => {
  app.mount('#app');
});

步骤2：在根组件中设置全局InstantSearch容器 #

修改App.vue，添加根级别的<ais-instant-search>组件，注入全局的searchClient，所有子组件的InstantSearch组件将自动继承此配置：

<template>
  <ion-app>
    <ais-instant-search 
      :search-client="searchClient" 
      index-name="latest_catalog"
      style="width:100%;padding:5px;padding-right:10px;"
    >
      <ion-router-outlet />
    </ais-instant-search>
  </ion-app>
</template>

<script setup>
import { inject } from 'vue';

// 注入全局提供的searchClient
const searchClient = inject('searchClient');
</script>

步骤3：在子组件中直接使用InstantSearch组件 #

现在任意子页面或组件都可以直接使用<ais-configure>、<ais-search-box>等组件，无需重复传入search-client：

<template>
  <div>
    <ais-configure
      :hits-per-page.camel="hpp_number"
      :filters="car_model"
      :query="search_query"
    />
    <ais-search-box placeholder="搜索内容..." />
    <ais-hits>
      <template #item="{ item }">
        <div class="hit-item">
          <h3>{{ item.title }}</h3>
          <p>{{ item.location }}</p>
        </div>
      </template>
    </ais-hits>
  </div>
</template>

<script setup>
// 定义组件所需的变量
const hpp_number = 10;
const car_model = "你的过滤规则";
const search_query = "";
</script>

替代方案：全局挂载到app.config.globalProperties #

如果偏好传统全局属性的方式，可在main.js中添加：

app.config.globalProperties.$searchClient = searchClient;

之后在组件中通过以下方式获取：

import { getCurrentInstance } from 'vue';
const app = getCurrentInstance();
const searchClient = app.appContext.config.globalProperties.$searchClient;

但更推荐使用provide/inject的方式，符合Vue3组合式API的设计规范。

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