Algolia Instantsearch (Vuejs) - разместить окно поиска снаружи (в другом компоненте)

Question

Я создаю одностраничное приложение, используя Vue, Vue-router и Vuex. Я пытался внедрить Algolia Instantsearch vuejs, но у меня возникли некоторые проблемы. Поскольку в моем приложении используется много вложенных компонентов, мне сложно понять, как его структурировать.

Это базовая структура: - приложение - Заголовок (это место, где находится поисковый ввод) - Содержание - Поиск (здесь отображаются уточнения и результаты) - Нижний колонтитул

Я прочитал документацию, но я мог что-то пропустить. Допустим, пользователь находится на главной странице, когда начинает вводить данные для поиска в компоненте Header. Затем я использую vue-router для перехода к / search, но это не похоже на работу?

Я не знаю, как это сделать? Из того, что я могу понять, в документации только показано, как синхронизировать с vue-router и как обрабатывать мой сценарий.

Я полагаю, что это довольно распространенный вариант использования InstantSearch, но я не смог найти ничего, что можно было найти в Google. Может быть потому, что я не знаю, как описать проблему.

Я надеюсь, что вы можете помочь.

Спасибо!

Answer 1

Если вы используете последнюю версию vue-instantsearch, вы можете использовать ais-configure, как описано https://www.algolia.com/doc/api-reference/widgets/configure/vue/.

<ais-instant-search :index-name="indexName" :search-client="searchClient">
  <ais-configure :query="query" />
  <ais-hits>
    <div slot="item" slot-scope="{ item }">
      <h2>{{ item }}</h2>
    </div>
  </ais-hits>
</ais-instant-search>