How to implement data persistence using the vuex third-party package

Purpose:

Allow the state data managed in vuex to be stored locally at the same time. You can avoid the need for your own storage.

• During the development process, user information (name, avatar, token) needs to be stored in vuex and locally.
• If other modules also 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 modules file in the src/store folder, and create 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) Next: 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 plugin 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']
+ })
+ ]
})

Notice:

• ===> By default, it is stored in localStorage
• ===> key is the key name for storing data
• ===> paths are the data stored in the state. If it is specific data under the module, the module name needs to be added, such as user.token
• ===> Changes in local storage data can only be seen after the state is modified and triggered.

Summarize:

• Implement data persistence in vuex based on third-party packages
• The condition that triggers persistence is that the state changes

This is the end of this article about how to use the vuex third-party package to implement data persistence. For more relevant vuex data persistence content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!