Solution of data loss after vuex refresh

Lead:

When we write vue project, we often use vuex as memory to store, but the data we store in vuex (user data, current page data, etc.) will be lost after refreshing, so how to solve it? Super simple.

1. Install vuex-persistedstate

npm install --save vuex-persistedstate

2. Modify store

import createPersistedState from 'vuex-persistedstate'
 
const store = new Vuex.Store({
 state: {
 user: {}, // Users 
 },
 mutations: {
 update_user(state, newuser) {
  state.user = newuser
 },
 },
 // Cache all data locally 
 plugins: [createPersistedState()],
})
 
export default store;

After saving, run the program again, and the data in vuex will not be lost after refreshing.

Summarize