vuex页面刷新防止数据丢失

最新推荐文章于 2024-07-02 17:47:34 发布

自由yang

最新推荐文章于 2024-07-02 17:47:34 发布

阅读量288

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/qq_61268825/article/details/123659568

版权

可借助浏览器的本地存储

localStorage

sessionStorage

在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>