vue-instantsearch 在我的 VueJS 3.0 项目中不起作用

Question

我有一个结合了 Firebase 和 Algolia 的 VueJS 3.0 项目（选项 API）。一切正常。我在 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版本问题。 vue-instantsearch 至少需要 3.1.2 才能工作，我在 3.0.0 上安装了它！要更新到更高版本，您需要为 vue 编译器指定正确的版本。目前最新版本是3.2.20。要升级到此版本，请在 package.json 中进行此设置：

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

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

vue-instantsearch 在我的 VueJS 3.0 项目中不起作用

vue-instantsearch not working in my VueJS 3.0 project

javascript

vue.js

algolia

vue-instant-search

vuejs3