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

Vuex刷新页面数据丢失

vuex的数据是存储在内存中的

当刷新浏览器时，会将内存释放清空数据,导致vuex中的数据丢失

此时可借助浏览器的本地存储

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>