Solve vuex data loss problem

Causes of data loss

The data stored in vuex is only in the page, which is equivalent to a global variable. When the page is refreshed, the data in vuex will be re-initialized, resulting in data loss.

Because the data in vuex is stored in running memory, when the page is refreshed, the page will reload the vue instance, and the data in vuex will be reassigned.

Method 1: Use the third-party library vuex-persistedstate

npm install --save vuex-persistedstate

01 store / of localStorage

- Note: vuex-persistedstate is stored in localStorage by default, and basically no configuration is required

import createPersistedState from "vuex-persistedstate"
const store =({
state: {
cartList: [],
},
mutations: {},
actions: {},
// When the value in state changes, the value of vuex in localStorage will synchronize all values in state, and when the page is refreshed　New time，stateThe value oflocalStorageAutomatically obtainvuexofvaluevalue，赋value到statemiddle
plugins: [createPersistedState()] 
})

02 store / sessionStorage

import createPersistedState from "vuex-persistedstate"
const store = new ({
   state: {},
   mutations: {},
   actions: {},
   plugins: [createPersistedState({
       storage:  // Same as localStorage, just store all values of vuex in sessionStorage   })]
})

03 store / Specify the state that needs to be persisted using vuex-persistedstate

import createPersistedState from "vuex-persistedstate"

const store = ({
 state: {
count: 0
},
 mutations: {},
 actions: {},
 plugins: [createPersistedState({
 storage:,
 reducer(val)  {
         // At this time, when count changes, this function will be called, and the value of val is the current state object, and the value of return is the value of the current locally stored value (the key value stored locally is vuex)         return {
             count: ,
   changeCount: 'aaa'
         }
     }
 })]
}）

Method 2: cache the state data into localStorage first. When the page is refreshed, get the data and write it to vuex

store /

import Vue from 'vue';
import Vuex from 'vuex';
 
(Vuex);
 
export default new （{
    state: {
       orderList: [],
       menuList: []
   },
    mutations: {
        orderList(s, d) {
          = d;
          ("list",())
        },  
        menuList(s, d) {
           = d;
          ("list",())
       },
   }
}）

When the page is refreshed

The localStorage storage of data is performed by listening to the beforeunload event. The beforeunload event is triggered when the page is refreshed. The specific method is to use the following code in the created() cycle function

if (("list") ) {
    this.$(({}, this.$,(("list"))))
} 
 
("beforeunload",()=>{
    ("list",(this.$))
})

This is the end of this article about solving vuex data loss problem. For more related vuex data loss content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!