vuex在浏览器中刷新管理的数据会丢失的解决办法

众所周知，vuex是状态管理器，在项目中也使用老久了，一直没碰上问题，前段时间做了个web端项目，碰上问题了，测试每次都下意识刷新下页面，然后每次刷新之后，登录之后储存的信息就丢了，我通过各种console发现，每次刷新之后，vuex内存的信息都为空了。

知道原因之后，就要想办法把数据保存在某处，怎么刷新也不会丢的那种，于是我就想到了localStorage和sessionStorage，不想在浏览保留太多数据，就用了sessionStorage与vuex相互协作来解决这个问题。

vuex中的变量是响应式的，而sessionStorage不是，当你改变vuex中的状态，组件会检测到改变，而sessionStorage就不会了，页面要重新刷新才可以看到改变，所以应让vuex中的状态从sessionStorage中得到，这样组件就可以响应式的变化

首先store下面js里面，

import Vue from 'vue'   
export const USER_SIGNIN = 'USER_SIGNIN' //登录成功 
export const USER_SIGNOUT = 'USER_SIGNOUT' //退出登录
export const USER_INFO_COMMIT = 'USER_INFO_COMMIT' 
//sessionStorage 传值进state export const 
//用户未读信息的实时展示   
export default {
  state:{
    userInfo:{ //储存用户相关信息   
    
    },
    isUserLogin:false
  },
  //mutations 同步的操作
  mutations: {
    [USER_SIGNIN](state, user) { 
      sessionStorage.setItem('userInfo',JSON.stringify(user));
      sessionStorage.setItem('isUserLogin', 'true');
      if(JSON.stringify(user)){
        Object.assign(state.userInfo, sessionStorage.getItem('userInfo') ? JSON.parse(sessionStorage.getItem('userInfo')) : user)
        state.isUserLogin = sessionStorage.getItem('isUserLogin') ? JSON.parse(sessionStorage.getItem('isUserLogin')) : false;
      }
    },
    [USER_SIGNOUT](state) {
       console.log("USER_SIGNOUT");
       state.isUserLogin = false;
       state.userInfo = {};
       sessionStorage.clear();
    },
    [USER_INFO_COMMIT](state){
       Object.assign(state.userInfo, sessionStorage.getItem('userInfo') ? JSON.parse(sessionStorage.getItem('userInfo')) : {})
      state.isUserLogin = sessionStorage.getItem('isUserLogin') ? JSON.parse(sessionStorage.getItem('isUserLogin')) : false;
    }
  },
  //action 异步的操作
  actions: {
    [USER_SIGNIN]({commit}, user) {
      commit(USER_SIGNIN, user)
    },
  [USER_SIGNOUT]({commit}) {
      commit(USER_SIGNOUT)
    },
  [USER_INFO_COMMIT]({commit}) {
      commit(USER_INFO_COMMIT)
    }
  }
}

在需要用到的vue页面，可以如此使用：

computed: {
  isUserLogin() {
    if (this.$store.state.user.isUserLogin) {
      return this.$store.state.user.isUserLogin;
  } else {
      this.$store.commit("USER_INFO_COMMIT");
  return this.$store.state.user.isUserLogin;
  }
  },
  userInfo() {
    if (this.$store.state.user.isUserLogin) {
      return this.$store.state.user.userInfo;
  } else {
      this.$store.commit("USER_INFO_COMMIT");
  return this.$store.state.user.userInfo;
  }
  }
}

总体的实现思路是让vuex中store的状态从sessionStorage取值，并和sessionStorage保持一致。如果当前页面相关信息发生改变，就从vuex中既改变sessionStorage值也改变vuex里面的信息，时刻与sessionStorage保持一致。