vue单页⾯应⽤刷新⽹页后vuex的state数据丢失的解决⽅案
最近在⽤vue写pc端项⽬，⽤vuex来做全局的状态管理， 发现当刷新⽹页后，保存在vuex实例store⾥的数据会丢失。
1. 产⽣原因
其实很简单，因为store⾥的数据是保存在运⾏内存中的，当页⾯刷新时，页⾯会重新加载vue实例，store⾥⾯的数据就会被重新赋值。
2. 解决思路
1. ⼀种是state⾥的数据全部是通过请求来触发action或mutation来改变
2. ⼀种是将state⾥的数据保存⼀份到本地存储(localStorage、sessionStorage、cookie）中
很显然，第⼀种⽅案基本不可⾏，除⾮项⽬很⼩或者vuex存储的数据很少。⽽第⼆种可以保证刷新页⾯数据不丢失且易于读取。3. 解决过程
1. ⾸先得选择合适的客户端存储
localStorage是永久存储在本地，除⾮你主动去删除;
sessionStorage是存储到当前页⾯关闭为⽌;
cookie则根据你设置的有效时间来存储，但缺点是不能储存⼤数据且不易读取。
我选择的是sessionStorage，选择的原因vue是单页⾯应⽤，操作都是在⼀个页⾯跳转路由，另⼀个原因是sessionStorage可以保证打开页⾯时sessionStorage的数据为空，⽽如果是localStorage则会读取上⼀次打开页⾯的数据。
2. 然后是怎么⽤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 (Item("store") ) {
this.$placeState(Object.assign({}, this.$store.state,JSON.Item("store"))))
}
//在页⾯刷新时将vuex⾥的信息保存到sessionStorage⾥
window.addEventListener("beforeunload",()=>{
sessionStorage.setItem("store",JSON.stringify(this.$store.state))
})
}
}
sessionstorage和localstorage
参考⽂章

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。