刷新页面导致vuex数据丢失的解决办法

问题

使用vuex统一管理项目状态时，如若刷新页面，会导致存在vuex的数据丢失

原因

js代码是运行在内存中的，代码运行时的所有变量、函数也都是保存在内存中的。进行刷新页面的操作，以前申请的内存被释放，重新加载脚本代码，变量重新赋值，所以这些数据要想存储就必须存储在外部，例如：Local Storage、Session Storage、Index DB等。这些都是浏览器提供的API，让你可以将数据存储在硬盘上，做持久化存储。具体选择哪一个就根据你实际需求来选择。

解决方法：

1. 在全局app.vue中加入以下代码

export default {
          
   
  name: App,
  created () {
          
   
    if (sessionStorage.getItem("store") ) {
          
      //页面加载前读取sessionStorage里的状态信息
　　    this.$store.replaceState(Object.assign({
          
   }, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
    } 

    window.addEventListener("beforeunload",()=>{
          
      //在页面刷新前将vuex里的信息保存到sessionStorage里
　　    sessionStorage.setItem("store",JSON.stringify(this.$store.state))
    })
  }
}

2. 在vuex中

const state = {
          
   
  userInfo:JSON.parse(sessionStorage.getItem(`userInfo`))||{
          
   }
};
const mutations = {
          
   
  SET_USERINFO(state,userInfo){
          
   
    sessionStorage.setItem(`userInfo`,userInfo)
    state.userInfo=userInfo;
},
const actions = {
          
   
  updateUserInfo(context,value){
          
   
    context.commit(SET_USERINFO,value)
  }
}