Extending the Vuex store

Overview

Each widget rendered on a page using the Hawksearch Vue SDK has an attached Vuex store to it that holds the data and manages the state and behavior. It also enables creating a common data layer among widgets and is the main access point to the service itself. Being a vital part of the SDK this store has a set of specific functionalities that enable the Hawksearch features, but in some custom cases requires additional behavior based on the target project. This article presents the process of extending the provided Vuex store.

Steps to extend

1. Follow the steps for creating a standard widget - Creating widgets with Vue SDK

2. Open the widget initialization file to edit. The following code gives the basic concept on the extending process:

   import HawksearchVue from '@hawksearch/vue'; import '@hawksearch/vue/dist/vue-hawksearch.css'; window.addEventListener('load', () => { const config = { clientGuid: '9c2f60a5bc5941f0929f92ef257s8r03', apiUrl: 'https://searchapi-dev.hawksearch.net/api/v2/search/' }; var storeOverrides = { state: { extendedSearchOutput: null }, mutations: { updateExtendedSearchOutput(state, value) { state.extendedSearchOutput = value; } }, actions: { fetchExtendedResults({ commit, state }, searchParams) { setTimeout(() => { var searchOutput = Object.assign({}, state.searchOutput); if (searchOutput) { searchOutput.Results = searchOutput.Results.map(item => { Object.assign(item.Document, { "custom": ["Custom"] }); return item; }); commit('updateExtendedSearchOutput', searchOutput); } }, 2000); } } }; // Provide the store overrides to the store instances generator var store = HawksearchVue.generateStoreInstance(config, storeOverrides); // Attach to an existing mutation. This is only necessary for the specefic case. const unsubscribe = store.subscribe((mutation, state) => { if (mutation.type == 'updateResults') { store.dispatch('fetchExtendedResults', {}); } }); // Create a widget with the extended store var widget = HawksearchVue.createWidget('#hawk-sample', { config, store }); HawksearchVue.initialSearch(widget); });

    

   • The initialization of the widget is switched to the advanced type (with provided store in the createWidget method)

   • The store itself is created prior to the widget

     var store = HawksearchVue.generateStoreInstance(config, storeOverrides);

     Providing a seconf paramter in generateStoreInstance adds store configuration on top of the default one - state, mutations, actions, getters.

   • In this sample a storeOverrides object is created containing all required modifications (line 10). This modification will create a new state extendedSearchOutput which will be populated with data of a dummy asynchronous method on top of the default provided searchOutput state. That new state will be later availble for all components in the SDK.

   • The action created for this custom purpose may be dispatched in any of the components, but in this case it is attached to another from the store - updateResults (line 41).

Store Variables & Extending Examples

• We use vuex store in our SDK to handle all the results and facets. Below are the variables being used inside a whole application. We can call these actions to extend our results

• export default { storeId: null, config: {}, searchOutput: null, prevSearchOutput: null, suggestions: null, pendingSearch: { Keyword: "", FacetSelections: {} }, extendedSearchParams: {}, searchError: false, loadingResults: false, loadingSuggestions: false, waitingForInitialSearch: true, searchCancelation: null, autocompleteCancelation: null, language: null, isFirstInitialSearch: true, initialSearchUrl: null };

• We can create the custom actions by following https://hawksearch.atlassian.net/wiki/spaces/CON/pages/1469481166/Extending+the+Vuex+store#Steps-to-extend.

• We can use these actions to extend the results, change the keyword/facets (programmatically), handle loading etc.

• We can also add the extending results in the custom components Overriding components.

Example:

We can create a custom component like (Example.vue):

And update the config file for custom component by adding

Now you can see the rendered data from searchOutput to our own created extendedSearchOutput inside a custom component.