Examples of how to interract with a custom search store

Hi There,

I need to create a custom search store so that I have more control over when the searches are executed. I have read the documentation on how to do this here:

But this doesn’t show examples of how to then incorporate this into your application. So after I have created the search store, it is not clear to me how to then use it.

I had thought it would be like this (I’m using vuex to share data between components):

import { createFromAlgoliaCredentials } from 'vue-instantsearch';

const searchStoreObj = createFromAlgoliaCredentials('appId', 'apiKey');


const dataStore = new Vuex.Store({
    search: {
        state: {
            store:  searchStoreObj,
        getters : {
            getStore : state => state.store

and then in a component:

        <ais-index :index-name="indexName" :search-client="search">
            <!--render results -->

export default {
    data() {
        return {
            search: this.$store.getters["search/getStore"]

Hey there,

It seems like the issue is you’re using search-client instead of search-store. They are two different concepts (the search client being more recent).

Updating your ais-index component to this should work:

<ais-index :index-name="indexName" :search-store="search">
  <!--render results -->

Let me know if that works!

Brilliant you are a star! I don’t know how I missed that.

I am actually managing three different searches from my page, each with different query paramers. Should I create 3 search store instances do you think? Or have one and update for each search I run?



For each of the searches with the separate parameters I’d create a new search store :slight_smile:

Thank you! All set up an running great :grinning: