vuex的state数据丢失

1. 产生原因
其实很简单，因为store里的数据是保存在运行内存中的,当页面刷新时，页面会重新加载vue实例，store里面的数据就会被重新赋值。

2. 解决思路
一种是state里的数据全部是通过请求来触发action或mutation来改变

一种是将state里的数据保存一份到本地存储(localStorage、sessionStorage、cookie）中

很显然，第一种方案基本不可行，除非项目很小或者vuex存储的数据很少。而第二种可以保证刷新页面数据不丢失且易于读取。

3. 解决过程
首先得选择合适的客户端存储

localStorage是永久存储在本地，除非你主动去删除;

sessionStorage是存储到当前页面关闭为止;

cookie则根据你设置的有效时间来存储，但缺点是不能储存大数据且不易读取。

我选择的是sessionStorage,选择的原因vue是单页面应用，操作都是在一个页面跳转路由，另一个原因是sessionStorage可以保证打开页面时sessionStorage的数据为空，而如果是localStorage则会读取上一次打开页面的数据。

然后是怎么用sessionStorage来保存state里的数据。

第一种方案

由于state里的数据是响应式，所以sessionStorage存储也要跟随变化。又由于vuex规定所有state里数据必须通过mutation方法来修改，所以第一种方案就是mutation修改state的同时修改sessionStorage对应存储的属性

第二种方案

第一种方案确实可以解决问题，但这种方法很明显让人觉得怪异，都这样了，那不如直接用sessionStorage来做状态管理。

那怎么才能不用每次修改state时同时也要修改sessionStorage呢？这时我们可以换一个思路，因为我们是只有在刷新页面时才会丢失state里的数据，那有没有办法在点击页面刷新时先将state数据保存到sessionStorage,然后才真正刷新页面?

当然有，beforeunload这个事件在页面刷新时先触发的。那这个事件应该在哪里触发呢？我们总不能每个页面都监听这个事件，所以我选择放在app.vue这个入口组件中，这样就可以保证每次刷新页面都可以触发。

具体的代码如下：

export default {
name: 'App',
created () {
//在页面加载时读取sessionStorage里的状态信息
if (sessionStorage.getItem("store") ) {
this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
}

//在页面刷新时将vuex里的信息保存到sessionStorage里
window.addEventListener("beforeunload",()=>{
sessionStorage.setItem("store",JSON.stringify(this.$store.state))
})
}
}
————————————————
版权声明：本文为CSDN博主「赵天明」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/guzhao593/article/details/81435342

vuex的state数据丢失相关推荐

vuex刷新state数据丢失问题
用vuex来做全局的状态管理时, 发现当刷新网页后,保存在vuex实例store里的数据会丢失. 1. 产生原因其实很简单,因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载v ...
uniapp、vue，vuex中state改变，getters不动态改变的完美解决方案！
uniapp.vue,vuex中state改变,getters不动态改变的完美解决方案! 参考文章: (1)uniapp.vue,vuex中state改变,getters不动态改变的完美解决方案! ( ...
vuex刷新页面数据丢失怎么解决_你是否真正了解Vuex
很久不写文章了,断了有一年多.这期间加入了新的团队做leader,认识新的朋友,迎接新的挑战.本应该坐下来整理自己的所见与所得,但又担心是否会起到作用,是否大家会认同.就像以前有一个朋友问我写这么多入 ...
在vue组件中使用vuex的state状态对象的5种方式
下面是store文件夹下的state.js和index.js内容 state.js //state.js const state = {headerBgOpacity:0,loginStatus:0, ...
Do not mutate vuex store state outside mutation handlers.
组件代码: selectItem(item,index) {this.selectPlay({list: this.songs,index}) }, ...mapActions(['selectPla ...
棘手的问题input：当在严格模式中使用 Vuex 时，在属于 Vuex 的 state 上使用 v-model，input
棘手的问题input:当在严格模式中使用 Vuex 时,在属于 Vuex 的 state 上使用 v-model,input 用"Vuex 的思维"去解决这个问题的方法是:给 &l ...
uniapp中利用监视vuex中state数据配合uview实现登录消息提示
先看效果图登录成功或者退出成功都能够给用户提示,提示用户体验! uview的顶部消息提示详情可见u-top-tips 设计思路首先是页面的布局是将顶部消息提示写在了个人详情页内 <u-to ...
Vuex的State核心概念
Vuex的State核心概念 State提供唯一的公共数据源,所有共享的数据都要统一放到Store的 State中进行存储. //创建store数据源,提供唯一公共数据 const store = n ...
解决this._data.$$state...“Error: [vuex] do not mutate vuex store state outside mutation handlers.“ 报错
今天遇到了这样一个报错: [Vue warn]: Error in callback for watcher "function () {return this._data.$$state; ...

vuex的state数据丢失

vuex的state数据丢失相关推荐

最新文章

热门文章