Question

我正在努力将vue-instantsearch与Vue SSR app中的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集成

，我将不胜感激

如何在Vuex的SSR中使用vue-instantsearch？

0 个答案: