解决vuex在页面刷新后数据被清除相关解决方案

原由剖析：

JavaScript代码是运行在内存当中的，代码运行时的变量，函数，也都是保存在内存中的。刷新页面后，之前申请的所有内存会被释放，重新加载JavaScript代码，变量和函数将重新赋值和初始化。因此，刷新页面保留数据就必须使用外部存储——客户端 or 服务器

客户端存储：

1，localStorage

localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。

 
 localStorage.setItem("key", "value"); //以“key”为名称存储一个值“value”

 localStorage.getItem("key"); //获取名称为“key”的值

 localStorage.removeItem("key"); //删除名称为“key”的信息。

 localStorage.clear();​ //清空localStorage中所有信息

2，sessionStorage

sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。源生接口可以接受，亦可再次封装来对Object和Array有更好的支持。

 
 sessionStorage.setItem("key", "value"); //以“key”为名称存储一个值“value”

 sessionStorage.getItem("key"); //获取名称为“key”的值

 sessionStorage.removeItem("key"); //删除名称为“key”的信息。

 sessionStorage.clear();​ //清空sessionStorage中所有信息

3，Cookie

生命期为只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。 存放数据大小为4K左右 。有个数限制（各浏览器不同），一般不能超过20个。与服务器端通信：每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题。但Cookie需要程序员自己封装，源生的Cookie接口不友好(https://www.jb51.net/article/64330.htm)。

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

export default {
 state: {
  userId: localStorage.getItem('id'),
  userName: localStorage.getItem('username'),
  token: localStorage.getItem('token'),
  email: ''
 },
 mutations: {
  setUserId(state, id) {
   state.userId = id
   localStorage.setItem('id', id)
  },
  setUserName(state, name) {
   state.userName = name
   localStorage.setItem("username", name)
  },
  setToken(state, token) {
   state.token = token
   localStorage.setItem('token', token)
  },
  setEmail(state, email) {
   state.email = email
  }
 },
 actions: {
  // 登录
  handleLogin({ commit }, { userName, password }) {
   commit('setUserId', userinfo.id)
   commit('setUserName', userinfo.username)
   commit('setToken', userinfo.token)
   commit('setEmail', userinfo.email)
  },
  // 退出登录
  handleLogOut() {
   localStorage.removeItem("id")
   localStorage.removeItem("username")
   localStorage.removeItem("token")
  }
 }
}