解决vuex数据丢失问题

数据丢失的原因

vuex存储的数据只是在页面中,相当于全局变量,页面刷新的时候vuex里的数据会重新初始化,导致数据丢失。

因为vuex里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,vuex里面的数据就会被重新赋值。

方法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))
})
作者:小渣亮原文地址:https://blog.csdn.net/weixin_43845137/article/details/128823323

%s 个评论

要回复文章请先登录注册