vue-即时搜索在我的VueJS 3.0项目中不起作用

Question

我有一个Algolia3.0项目(选项应用编程接口)与火基和VueJS的组合。一切都很好。我在Algolia中定义了多个索引，我可以用我自己编写的Vue代码同时搜索它们，但我更愿意使用Algolia中的vue-instantsearch。我试着设置基本的方法来搜索一个索引(companyIndex)，但是我不能让它工作。我得到的错误是这样的(#是我的密钥)：

[Vue warn]: Unhandled error during execution of created hook 
  at <AisSearchBox> 
  at <AisInstantSearch search-client= {transporter: {…}, appId: '#########', addAlgoliaAgent: ƒ, clearCache: ƒ, search: ƒ, …}addAlgoliaAgent: ƒ (e,t)appId: "#########"clearCache: ƒ ()initIndex: ƒ (t)multipleQueries: ƒ (t,n)multipleSearchForFacetValues: ƒ (t,o)search: ƒ (t,n)searchForFacetValues: ƒ (t,o)transporter: {hostsCache: {…}, logger: {…}, requester: {…}, requestsCache: {…}, responsesCache: {…}, …}[[Prototype]]: Object index-name="companyIndex" > 
  at <Home onAuthenticated=fn<setAuthenticatedUser> onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > 
  at <RouterView onAuthenticated=fn<setAuthenticatedUser> > 
  at <App>
...
runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next 
  at <AisSearchBox> 
  at <AisInstantSearch search-client= {transporter: {…}, appId: '#########', addAlgoliaAgent: ƒ, clearCache: ƒ, search: ƒ, …} index-name="companyIndex" > 
  at <Home onAuthenticated=fn<setAuthenticatedUser> onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > 
  at <RouterView onAuthenticated=fn<setAuthenticatedUser> > 
  at <App>
...
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'instantSearchInstance')
    at Proxy.eval (widget.js?c00b:1)
    at Proxy.created (widget.js?c00b:1)
    at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:154)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?5c40:163)
    at callHook (runtime-core.esm-bundler.js?5c40:3177)
    at applyOptions (runtime-core.esm-bundler.js?5c40:3107)
    at finishComponentSetup (runtime-core.esm-bundler.js?5c40:7218)
    at setupStatefulComponent (runtime-core.esm-bundler.js?5c40:7143)
    at setupComponent (runtime-core.esm-bundler.js?5c40:7074)
    at mountComponent (runtime-core.esm-bundler.js?5c40:5079)

这是我的main.js：

import { createApp } from 'vue'
import { fbAuth } from '@/firebase/config'

import App from '@/App.vue'
import router from '@/router'
import VTooltip from 'v-tooltip'
import 'v-tooltip/dist/v-tooltip.css'
import InstantSearch from 'vue-instantsearch/vue3/es'

let app

fbAuth.onAuthStateChanged(_user => {
    // Only mount the app to the DOM if the user is not authenticated
    // This means once authenticted a browser refresh doesn't result into having to login again
    if (!app) {
        app = createApp(App)

        // It's crucial to first define tooltip, before mounting the app
        app.use(VTooltip, {
            defaultDelay: {
                show: 500,
                hide: 500
            }
            // classes: 'bg-primary-blue-900 text-white'
        })
        app.use(InstantSearch)

        app.use(router).mount('#app')
    }
})

这是我的组件的摘要：

<template>
  ...
  <ais-instant-search :search-client="searchClient" index-name="companyIndex">
    <ais-search-box />
    <ais-hits>
      <template v-slot:item="{ item }">
        <h2>{{ item.name }}</h2>
      </template>
    </ais-hits>
  </ais-instant-search>
  ...
</template>

<script>
import algoliasearch from 'algoliasearch/lite'
import { AisInstantSearch, AisSearchBox } from 'vue-instantsearch/vue3/es'
...
export default {
  name: 'Search',
  components: {
    AisInstantSearch,
    AisSearchBox,
    ...
  },
  props: [...],
  setup(props) {
    ...
    const searchClient = algoliasearch(
      '#######',
      '#######'
    )
    ...
    return {
      ...
      searchClient,
      ...
    }
  }
}
</script>

我做错了什么？

Answer 1

我终于弄清楚了问题所在:它是vue版本。它需要至少是3.1.2才能让vue-instantsearch工作，我把它放在了3.0.0！要更新到更高的版本，您需要为vue编译器指定正确的版本。目前最新版本是3.2.20。要升级到此版本，请在package.json中执行此设置：

  "devDependencies": {
     ...
    "@vue/compiler-sfc": "^3.2.20"
   }

然后运行npm install并运行您的项目以将其编译为该vue版本。