SSR에서 Vuex와 함께 vue-instantsearch를 사용하는 방법

SSR에서 Vuex와 함께 vue-instantsearch를 사용하는 방법

Vue SSR 앱의 Vuex 스토어와 vue-instantsearch를 통합하는 데 어려움을 겪고 있습니다.

https://github.com/algolia/vue-instantsearch-examples/tree/master/examples/ssr을 팔로우하려고 했지만 이 예에서는 다음 명령어만 사용하고 있습니다.context.storeVuex 스토어에서 사용할 수 있도록 개조하려고 합니다.

통합은 다음과 같습니다.

<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와 통합하는 방법의 샘플 코드를 보여주시면 감사하겠습니다.

언급URL : https://stackoverflow.com/questions/50564686/how-to-use-vue-instantsearch-in-ssr-with-vuex