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

一：数据丢失的原因

1. 将vuex中的数据直接保存到浏览器缓存中（sessionStorage、localStorage、cookie）
2. 页面刷新后再从浏览器中取出

二：解决的思路

1. 将vuex中的数据直接保存到浏览器缓存中（sessionStorage、localStorage、cookie）
2. 页面刷新后再从浏览器中取出

三：解决方法

方法一：

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"))))
   }
   

   在此可以进行优化

3. 通过监听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))
   })
   

   方法二：

4. 利用第三方库进行持久化存储安装

5. vuex-persistedstate

6. npm install --save vuex-persistedstate

   在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()] 
   })

7. 使用vuex-persistedstate存储到sessionStorage

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

8. 使用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'
            }
        }
    })]
   }）