这个问题的话,是在我用vuex做多标签保持页面管理系统的时候遇到了。
我在state里面建了一个stateTagsList数组,用来存储已经打开的页面路径。但是当页面刷新的时候 ,
我的所有页面的Tag也就跟着消失了。
原因:vuex的数据是存储在内存中的当刷新浏览器时,会将内存释放清空数据,导致vuex中的数据丢失
解决思路: 可借助浏览器的本地存储(localStorage,sessionStorage)
这是我所看到的原创作者的分享
https://blog.csdn.net/q1ngqingsky/article/details/111221561
具体做法(在App.vue中)
<template>
<div>
<router-view></router-view>
</div>
</template>
<script>
export default {
created(){
//在页面加载时读取sessionStorage里的状态信息
if(sessionStorage.getItem('storeState')){
//replaceState,替换store的根状态
this.$store.replaceState(Object.assign({},this.$store.state,JSON.parse(sessionStorage.getItem('storeState'))))
}
//在页面刷新时将vuex里的信息保存到sessionStorage里
window.addEventListener('beforeunload',()=>{
sessionStorage.setItem('storeState',JSON.stringify(this.$store.state))
})
}
}
</script>
以上就是浏览器刷新页面导致vuex数据丢失问题的解决方法了
如果这篇文章对你有帮助,或者在进行中遇到其他问题,欢迎评论区留言出来。
我们一起探讨~