Vuex page refresh data loss problem

Why does it say that the data of vuex will be lost when the page is refreshed?

It is normal for the data of vuex to be lost when the page is refreshed . In the memory, refresh the browser page, and the memory previously requested by the stack will be released. This is the operating mechanism of the browser, and the data in the stack will naturally be cleared.

Solution?

method one

Save state data in localstorage, sessionstorage or cookies.

• In the created method of app.vue, read the data in session storage and store it in the store. At this time, use the replaceState method of vuex.store to replace the root state of the store.

• Store store.state into sessionstorage in the beforeunload method.

export default {
  name: 'app',
  created () {
    // 在页面加载时读取sessionStorage
    if (sessionStorage.getItem('store')) {
      this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))))
    }
    // 在页面刷新时将store保存到sessionStorage里
    window.addEventListener('beforeunload', () => {
      sessionStorage.setItem('store', JSON.stringify(this.$store.state))
    })
  }
}

Method Two

Using vuex-persistedstate, it can be stored automatically.

download:

npm install --save vuex-persistedstate

use:

在store.js中引入
import createPersistedState from 'vuex-persistedstate'

export default new Vuex.Store({
  state: {
　　　count: 1
　},

  //配置 
  // 当state中的值发生改变，此时localStorage中的vuex的值会同步把state中的所有值存储起来，当页面刷
　　　新的时候，state的值会从localStorage自动获取vuex的value值，赋值到state中
  plugins: [createPersistedState()]
})

The default is to store it in localStorage. We can also store it in sessionStorage, such as:

import createPersistedState from 'vuex-persistedstate'

export default new Vuex.Store({
  state: {
　　　count: 1
  },

  //配置
  plugins: [createPersistedState({
   storage: window.sessionStorage
  })]
})

Use vuex-persistedstate to specify the state that needs to be persisted

import createPersistedState from "vuex-persistedstate"

const store = newVuex.Store({
 state: {
　　count: 0
},
 mutations: {},
 actions: {},
 plugins: [createPersistedState({
 　　storage:window.sessionStorage,
 　　reducer(val)  {
         // 此时，当count发生改变的时候，就会调用此函数，并且val的值为当前state对象，return的值为当前本地存储的value值（本地存储的key值为vuex）
         return {
             count: val.count,
　　　　  　　 changeCount: 'aaa'
         }
     }
 })]
}）

Summarize

• Vuex only saves the state in memory and will be lost after refreshing. If it is to be persisted, it must be saved.

• localStorage is very suitable. When submitting a mutation, it is stored in localStorage at the same time, and the value is taken out from the store as the initial value of the state.

• There are two problems here. Not all states need to be persisted; if there are many states that need to be saved, the code written is not elegant enough, and each submission must be saved separately. Here you can use the subscribe method provided by vuex for unified processing. You can even encapsulate a vuex plug-in for reuse.

• Similar plug-ins include vuex-persist and vuex-persistedstate. The internal implementation is to do unified processing by subscribing to mutation changes, and to control which ones need to be persisted through the options of the plug-in.