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:
https://community.algolia.com/vue-instantsearch/getting-started/search-store.html

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:

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

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 -->
</ais-index>

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?

Thanks

Ben

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: