Vuex URL Search Params
Description
Persist and rehydrate your Vuex store via url search params (window.location.search).
Installation
npm i --save vuex-url-search-params# or yarn add vuex-url-search-paramsTesting
npm i --no-save vue@2.x vue-template-compiler@2.x vuex@3.x # Optionally yarn test:jest # Runs Jest with coverage collection yarn test:coverage # Sends coverage to .coveralls.io yarn test # yarn test:jest && yarn test:coverage Usage
Look at the quite complex example at CodeSandbox:
Configuring
Note, this plugin is now suitable only for array-like and iterable Vuex state values!
Options
subscribeTo = [] <Array>
Mutations types for subscribing.
modifiers = {} <Object>
Object which defines how to <mutationType> payload will be transform to the query string search param and back
modifiers.<mutationType>.key <String>
Query string search param name
modifiers.<mutationType>.pushStateModifier <Function>
Function for modifying mutation payload value for using it in a query string search param with key above. Accepts <mutationType> payload as the first argument and Vuex store object as the second
modifiers.<mutationType>.popStateModifier <Function>
Function for modifying query string search param value for using it in an appropriate mutation. Accepts query string search param value as the first argument and Vuex store object as the second
modifiers.<mutationType>.emptyStateModifier <Function>
Function which result will be used as payload value for mutation when an appropriate query string search param become empty. Accepts Vuex store object as argument
qs = window.location.search <String>
Query string for initialization
store <Vuex.Store>
Vuex store object