Как использовать Vue-InstantSearch в SSR с Vuex? - PullRequest
Новая
       25

Как использовать Vue-InstantSearch в SSR с Vuex?

0 голосов
/ 28 мая 2018

Я изо всех сил пытаюсь интегрировать vue-instantsearch с магазином Vuex в приложение Vue SSR.

Я пытался следовать 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

...