vuex的state数据丢失的解决方案
产生原因其实很简单,因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,store里面的数据就会被重新赋值。解决思路一种是state里的数据全部是通过请求来触发action或mutation来改变一种是将state里的数据保存一份到本地存储(localStorage、sessionStorage、cookie)中很显然,第一种方案基本不可行,除非项...
·
-
List item
-
产生原因
其实很简单,因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,store里面的数据就会被重新赋值。 -
解决思路
一种是state里的数据全部是通过请求来触发action或mutation来改变
一种是将state里的数据保存一份到本地存储(localStorage、sessionStorage、cookie)中
很显然,第一种方案基本不可行,除非项目很小或者vuex存储的数据很少。而第二种可以保证刷新页面数据不丢失且易于读取。 -
解决过程
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
//公共仓库
const publics = {
state: {
phone: '', //用户手机号
userName: '', //用户昵称
userLogo: '', //用户头像
address: '', //当前地址
},
mutations: {
//地址更新
updataAddress (state,cityCode) {
state.address = cityCod
},
},
};
/**
@实现思路:全局监听,页面刷新的时候将store里state的值存到sessionStorage中,然后从sessionStorage中获取,再赋值给store。
然后再把session里面存的删除即可,相当于中间件的作用。
*/
//在页面加载时读取sessionStorage里的状态信息
if (sessionStorage.getItem("store")) {
// console.log('刷新后')
publics.state = JSON.parse(sessionStorage.getItem("store"))
sessionStorage.removeItem("store")
}
//在页面刷新时将vuex里的信息保存到sessionStorage里
window.addEventListener("beforeunload", () => {
// console.log('刷新前')
sessionStorage.setItem("store",JSON.stringify(publics.state))
});
export default new Vuex.Store({
modules: {
publics,
}
})
更多推荐
已为社区贡献6条内容
所有评论(0)