浏览器刷新页面导致vuex数据丢失问题如何解决？

这个问题的话，是在我用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数据丢失问题的解决方法了
如果这篇文章对你有帮助，或者在进行中遇到其他问题，欢迎评论区留言出来。
我们一起探讨~