解决vuex 数据丢失问题

Posted 2023-03-04 小渣亮

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了解决vuex 数据丢失问题相关的知识，希望对你有一定的参考价值。

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

copy于

方法1：使用第三方库 vuex-persistedstate

npm install --save vuex-persistedstate

01 store / index.js 之 localStorage

- 注意点： vuex-persistedstate默认存储在 localStorage之中，基本上不需要配置什么

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

02 store / index.js 之 sessionStorage

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

03 store / index.js 之使用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'
         
     
 )]
）

方法2 把state的数据先缓存到localStorage之中，页面刷新的时候，拿到数据写入vuex

store / index.js

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))
       ,
   
）

页面刷新的时候
- 通过监听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))
)