解决vuex数据丢失问题
小渣亮 人气:0数据丢失的原因
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)) })
加载全部内容