Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to achieve data persistence in the third-party package of vuex". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "vuex third-party package how to achieve data persistence" bar!

Objective:

Let the state data managed in vuex be stored locally at the same time. Can avoid the link of their own storage.

During the development process, user information (name, avatar, token) needs to be stored in vuex and locally stored.

If there are other modules that need to be persisted, they are also stored locally.

1) first: we need to install a vuex plug-in vuex-persistedstate to support vuex state persistence.

Npm i vuex-persistedstate

2) then: create a new modules file under the src/store folder, and create a new user.js and cart.js under modules

Src/store/modules/user.js

/ / user module export default {namespaced: true, state () {return {/ / user information profile: {id:', avatar:', nickname:', account:', mobile:', token:'}}, mutations: {/ / modify user information Payload is the user information object setUser (state, payload) {state.profile = payload}

3) continue: import the user module in src/store/index.js.

Import {createStore} from 'vuex'import user from'. / modules/user'export default createStore ({modules: {user}})

4) finally: use the vuex-persistedstate plug-in for persistence

Import {createStore} from 'vuex'+import createPersistedstate from' vuex-persistedstate'import user from'. / modules/user'export default createStore ({modules: {user}, + plugins: [+ createPersistedstate ({+ key: 'erabbit-client-pc-store',+ paths: [' user'] +}) +]})

Note:

= = > it is stored in localStorage by default

= > key is the key name where the data is stored

Paths is used to store the data in the state. If it is specific data under the module, you need to add the module name, such as user.token.

The change of locally stored data can only be seen after the state is modified.

Summary:

Persistence of data in vuex based on third Party package

The condition for triggering persistence is that state changes

At this point, I believe you have a deeper understanding of "vuex third-party package how to achieve data persistence". 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.