解决Vuex在页面刷新后state数据被清除的问题

产生原因

JavaScript代码是运行在内存中的，代码运行时的所有变量、函数，也都是保存在内存中的。刷新页面，以前申请的内存被释放，重新加载脚本代码，变量重新赋值，所以这些数据要想存储就必须存储在外部，例如：Local Storage、Session Storage、IndexDB等。这些都是浏览器提供的API，让你可以将数据存储在硬盘上，做持久化存储。

解决办法

HTML5提供了两种在客户端存储数据的新方法：

• localStorage：没有时间限制的数据存储
• sessionStorage：针对一个session的数据存储

此前，这些都是由Cookie完成的，但是Cookie不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得Cookie速度很慢而且效率也不高

localStorage没有时间期限，除非将它移除，sessionStorage即会话，当浏览器关闭时会话结束，有时间期限

这里使用sessionStorage，需要注意的是Vuex中的变量是响应式的，而sessionStorage不是，当你改变Vuex中的状态，组件会监测到改变，而sessionStorage不会，页面需要重新刷新才可以看到变化，所以应让Vuex中的状态从sessionStorage中得到，这样组件就可以响应式的变化

具体实现

应用背景是用户登入后保存状态，退出后移除状态

mutations.js

ADD_LOGIN_USER (state, data) {  //登入，保存状态
  sessionStorage.setItem("username", data);  //添加到sessionStorage
  sessionStorage.setItem("isLogin", true);
  state.username = data,  //同步的改变store中的状态
  state.isLogin = true
},
SIGN_OUT (state) {  //退出，删除状态
  sessionStorage.removeItem("username");  //移除sessionStorage
  sessionStorage.removeItem("isLogin");
  state.username = ''  //同步的改变story中的状态
  state.isLogin=false
}

getters.js

isLogin (state) {
  if (!state.isLogin) {    
    state.isLogin = sessionStorage.getItem('isLogin');  //从sessionStorage中读取状态
    state.username = sessionStorage.getItem('username');
  }
  return state.username
}

总体的实现思路是让Vuex中的状态和sessionStorage保持一致（从sessionStorage取值）