How to access Hits data directly to store it in Vuex?

[tom43983]

I am using Instant Search for Vue in a Search component. This component has a search bar and displays the first 3 results in a element. Then I have a "Show more results" button that should take the user to a new component where I want to use the whole array of Hits to display them in my own component (not instant search), so it integrates with the standard way of showing data in my app.

What would be the easiest way to access the Hits data directly in order to store it in Vuex?

I have tried this solution: https://github.com/algolia/vue-instantsearch/issues/716 but I get an error that says "It looks like you forgot to wrap your Algolia search component "" inside of an "" component." I feel this solution is outdated.

In this guide: https://www.algolia.com/doc/api-reference/widgets/infinite-hits/js/ I found: "In addition, the full results data is available, which includes..."

Does it mean there is an easy way to access and manipulate the results as any Vue data?

Thanks for any help!

[Haroenv]

Can you clarify what you mean with moving the display, should it still be interactive? You can use the hits data if the button is wrapped in an ais-hits as well, like this:

<ais-instant-search>
  <!-- your regular widgets -->
  <ais-searchbox/>
  <ais-hits/>
  <!-- custom button -->
  <ais-hits>
    <template slot-scope="{ hits }">
      <button @click="displayOtherPageAndSaveHits(hits)" type="button">go to other page</button>
    </template>
  </ais-hits>
</ais-instant-search>

[tom43983]

Thank you for your feedback. In the meantime I realised I could use with access to all the data in a method AND I can filter the results at the same time. Which is exactly what I wanted!