Shulou(Shulou.com)05/31 Report--

This article focuses on "how to use vuex-persistedstate to store vuex locally". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn how to use vuex-persistedstate to store vuex locally.

Vuex-persistedstate uses vuex local storage scenarios

Recently, I was working on the login module in the Vue project. After a successful login, I got the token and stored the token in the vuex. However, I found that the data in the vuex returned to the default after switching routes, and the vuex data returned to the default after the original page refresh. Later, authentication processing requires token, so we need to store the data in vuex locally.

The vuex persistence plug-in vuex-persistedstate is used here.

Vuex-persistedstate

The principle of this plug-in combines the storage method, but after unified configuration, there is no need to write the storage method manually.

How to use it:

Installation

Npm install vuex-persistedstate-save

Introduce configuration in index.js under store

Import {createStore} from 'vuex'import createPersistedState from' vuex-persistedstate'export default createStore ({state: {}, mutations: {}, actions: {}, modules: {}, plugins: [createPersistedState (),],})

This is the default storage to localStorage, if you want to store to sessionStorage, the configuration is as follows

Import {createStore} from 'vuex'import createPersistedState from' vuex-persistedstate'export default createStore ({state: {}, mutations: {}, actions: {}, modules: {}, plugins: [/ / store vuex data to sessionStorage createPersistedState ({storage: window.sessionStorage,}),],})

All state are persisted by default. If you want to store the specified state, the configuration is as follows

Import {createStore} from 'vuex'import createPersistedState from' vuex-persistedstate'export default createStore ({state: {}, mutations: {}, actions: {}, modules: {}, plugins: [/ / Storage the data of vuex to sessionStorage createPersistedState ({storage: window.sessionStorage) Reducer (val) {return {/ / only store userData userData: val.userData} in state),],}) API

Key: key that stores persistent state (default vuex)

Paths: an array of any path to a partially persistent state. If no path is given, the complete state is persistent. (default: [])

Reducer: a function that will be called to persist the state based on a given path. These values are included by default.

Subscriber: a function called to set abrupt subscriptions. The default is store = > handler = > store.subscribe (handler)

Storage: not (or with) getState and setState. The default is localStorage.

GetState: a function that will be called to rehydrate the previous persistent state. Storage is used by default.

SetState: the function that will be called to maintain the given state. Storage is used by default.

Filter: the function that will be called to filter any mutation that will eventually trigger the setState storage. Default is () = > true

What is the local storage vuex of vuex

Vuex is a state management model developed specifically for Vue.js applications

Vuex is a warehouse, as we all know, a place where public data can be stored. Data in vuex can be used by any component.

Five cores in vuex

State

The state object that holds the Vuex store instance, which is used to define the shared data and the set variables

Action

Send a call notification to store to perform an asynchronous operation

Mutations

It is only used to modify the state variables defined in state, which is equivalent to methods in vue to perform logical code operations.

Modules

Classify the state, which is equivalent to a module

Getters

External programs use it to get the specific value of a variable, or to do some calculations before taking a value (which can be thought of as a computational property of store)

Plugins

This is a display of the array rather than in the form of an object, which is the local storage of the vuex in the array in the form of objects.

Vuex-persist

Vuex is a cache of plug-in data, which is essentially the same as localStorage, which stores data locally. Of course, the features of this plug-in can only be used in vuex, but not in vue.

So how does vuex-persist use

Download from the terminal

Cnpm install vuex-persist-save

After the download is completed, you also need to introduce it into vuex.

Import vuexPersist from 'vuex-persist'

After introduction, you need to instantiate the

Plugins: [new vuexPersist ({localstorage:window.localStorage,}) .plugin,]

New an object writes localStorage out of an object

The object from new needs to be the same as the name introduced.

Of course, there is another way to store vuex locally.

The above methods are relatively complicated.

Download directly from the terminal

Cnpm install vuex-persistedstate-save

You can call this method directly in plugins. For simplicity, you don't need to new it again.

Plugins: [Persist ()] at this point, I believe you have a deeper understanding of "how to use vuex-persistedstate to store vuex locally". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.