解决Vuex刷新页面数据丢失的问题

参考：
https://blog.csdn.net/qq_51441159/article/details/128047610
在这里插入图片描述
方法一（不使用插件）：
1、直接在vuex修改数据方法中将数据存储到浏览器本地存储中

import Vue from 'vue';
import Vuex from 'vuex';
 
Vue.use(Vuex);
 
export default new Vuex.Store（{
    state: {
       orderList: [],
       menuList: []
   },
    mutations: {
        orderList(s, d) {
          s.orderList= d;
          window.localStorage.setItem("list",jsON.stringify(s.orderList))
        },  
        menuList(s, d) {
          s.menuList = d;
          window.localStorage.setItem("list",jsON.stringify(s.menuList))
       },
   }
}）

2、在页面加载时再从本地存储中取出并赋给vuex

if (window.localStorage.getItem("list") ) {
        this.$store.replaceState(Object.assign({}, 
        this.$store.state,JSON.parse(window.localStorage.getItem("list"))))
}

在此可以进行优化
通过监听beforeunload事件来进行数据的localStorage存储，beforeunload事件在页面刷新时进行触发，具体做法是在App.vue的created()周期函数中下如下代码：

if (window.localStorage.getItem("list") ) {
    this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(window.localStorage.getItem("list"))))
} 
 
window.addEventListener("beforeunload",()=>{
    window.localStorage.setItem("list",JSON.stringify(this.$store.state))
})

方法二（使用插件）：
1、安装 vuex-persistedstate

npm install --save vuex-persistedstate

2、在store文件夹下的indedx.js中配置信息
使用vuex-persistedstate默认存储到localStorage

import createPersistedState from "vuex-persistedstate"
const store =newVuex.Store({
　　state: {
　　　　count: 1
　　},
　　mutations: {},
　　actions: {},
　　// 当state中的值发生改变，此时localStorage中的vuex的值会同步把state中的所有值存储起来，当页面刷
　　　新的时候，state的值会从localStorage自动获取vuex的value值，赋值到state中
　　plugins: [createPersistedState()] 
})

使用vuex-persistedstate存储到sessionStorage

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
   state: {},
   mutations: {},
   actions: {},
   plugins: [createPersistedState({
       storage:window.sessionStorage  // 同localStorage相同，只是将vuex的所有值存储到sessionStorage中
   })]
})

使用vuex-persistedstate指定需要持久化的state

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'
         }
     }
 })]
}）