vuex中处理页面刷新后数据丢失的问题:
大家用vue开发的时候,经常会用到vuex状态管理,这就出现了一个问题,当我们刷新页面之后,保存在vuex实例store里的数据会丢失。
1、产生的原因:
因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,store里面的数据就会被重新赋值。
2、解决问题:
-
一种是state里的数据全部是通过请求来触发
action
或mutation
来改变 -
一种是将state里的数据保存一份到本地存储(
localStorage
、sessionStorage
、cookie
)中。
3、具体方法:
因为我们是只有在刷新页面时才会丢失state里的数据,那就在点击页面刷新时先将state数据保存到sessionStorage。
这时候就会用到beforeunload,
这个事件在页面刷新时先触发的。那这个事件应该在哪里触发呢?我们总不能每个页面都监听这个事件,
所以我选择放在app.vue
这个入口组件中,这样就可以保证每次刷新页面都可以触发。
上代码: