2

我正在努力将 vue-instantsearch 与 Vue SSR 应用程序中的 Vuex 商店集成。

我试图关注https://github.com/algolia/vue-instantsearch-examples/tree/master/examples/ssr但是这个例子只是使用context.store，我正在尝试调整它以与 Vuex 商店一起使用

我的集成如下：

<template>
  <div class="vwp-single">
    <ais-index :searchStore="searchStore" :auto-search="false">
      <ais-search-box placeholder="Find products"/>
      <ais-refinement-list attribute-name="colors"></ais-refinement-list>
      <ais-results>
        <template scope="{ result }">
          <div>
            <ais-highlight :result="result" attribute-name="name"></ais-highlight>
          </div>
        </template>
      </ais-results>
    </ais-index>
    <div class="clearfix"></div>
  </div>
</template>

<script>
import {
  createFromAlgoliaCredentials,
  createFromSerialized,
  FACET_OR
} from 'vue-instantsearch'

import { mapGetters } from 'vuex'

const fetchInitialData = (store, route) => {
  let store1
  store1 = createFromAlgoliaCredentials(
    'latency',
    '6be0576ff61c053d5f9a3225e2a90f76'
  )
  store1.indexName = 'ikea'
  store1.query = route.params.query ? route.params.query : ''
  store1.addFacet('colors', FACET_OR)
  store1.highlightPreTag = '<mark>'
  store1.highlightPostTag = '</mark>'
  store1.start()
  store1.refresh()
  return store1.waitUntilInSync().then(() => {
    store.dispatch(`pt/searchStore`, store1.serialize())
  })
}

export default {
  computed: {
    ...mapGetters('pt', ['searchStore'])
  },
  prefetch: fetchInitialData,
  beforeMount () {
    if (!window.__INITIAL_STATE__) {
      throw new Error('Not state was found.')
    }
    this.searchStore = createFromSerialized(
      window.__INITIAL_STATE__.pt.searchStore
    )
  },
  methods: {
    loadResults () {
      fetchInitialData(this.$store, this.$route)
    }
  },
  created () {
    this.loadResults()
  },
  watch: {
    '$route' () {
      this.searchStore.query = this.$route.params.query
        ? this.$route.params.query
        : ''
    },
    'searchStore.query' (to) {
      if (to.length === 0) {
        this.$router.push({ name: 'map' })
      } else {
        this.$router.push({ name: 'mapSearch', params: { query: to } })
      }
    }
  }

}
</script>

如果我删除ais-index并渲染出来，{{ searchStore }}我可以看到返回的数据，但是如果我尝试将它安装在ais-index组件上，它会失败并出现以下错误：

[Vue warn]: Error in beforeMount hook: "TypeError: Cannot read property 'helper' of undefined"

found in

---> <PageMap> at src/theme/PageMap.vue
       <Root>
warn @ vue.runtime.esm.js:587
vue.runtime.esm.js:587 [Vue warn]: Error in nextTick: "AlgoliaSearchError: Please provide an application ID. Usage: algoliasearch(applicationID, apiKey, opts)"
warn @ vue.runtime.esm.js:587
vue.runtime.esm.js:1737 AlgoliaSearchError {name: "AlgoliaSearchError", message: "Please provide an application ID. Usage: algoliasearch(applicationID, apiKey, opts)", stack: "AlgoliaSearchError: Please provide an application …ttp://localhost:3100/assets/js/vendor.js:6674:45)"}

如果有人能指出正确的方向如何调试或显示示例代码如何将 vue-instantsearch 与 Vuex 和 SSR 集成，将不胜感激

4

0 回答 0