解決刷新頁面vuex store中數據丟失的問題

**問題背景：**頁面刷新后，vuex中的數據丟失。這是因為：js代碼是運行在內存中的，代碼運行時的所有變量、函數也都是保存在內存中的。進行刷新頁面的操作，以前申請的內存被釋放，重新加載腳本代碼，變量重新賦值，所以這些數據要想存儲就必須存儲在外部，例如：Local Storage、Session Storage、Index DB等。這些都是瀏覽器提供的API，讓你可以將數據存儲在硬盤上，做持久化存儲。具體選擇哪一個就根據你實際需求來選擇。

解決思路：
在項目中，登錄后，通過登錄接口會獲取到很多用戶信息，首先將用戶信息保存在vuex的store中，同時將這些信息也保存在sessionStorage中。這里需要注意的是vuex中的變量是響應式的，而sessionStorage不是，當你改變vuex中的狀態，組件會檢測到改變，而sessionStorage就不會了，頁面要重新刷新才可以看到改變，所以應讓vuex中的狀態從sessionStorage中得到，這樣組件就可以響應式的變化。

補充：
在客戶端存儲數據：HTML5提供了2種在客戶端存儲數據的新方法：localStorage沒有時間期限，除非將它移除，sessionStorage即會話，當瀏覽器關閉時會話結束，有時間期限。
之前，這些都是由cookie完成的，但是cookie不適合大量數據的存儲，因為它們由每個對服務器的請求來傳遞，這使得cookie速度很慢，而且效率不高。

代碼如下：
1.在vuex中

const state = {
  token:sessionStorage.getItem(`token`)||``,
  userInfo:JSON.parse(sessionStorage.getItem(`userInfo`))||{},
  roleInfoList:JSON.parse(sessionStorage.getItem(`roleInfoList`))||[],
};

const getters = {
};

const mutations = {
//保存token
  setToken(state,token){
    sessionStorage.setItem(`token`,token)
    state.token=token;
  },
//保存用戶登錄信息
  setUserInfo(state, userInfo) {
    sessionStorage.setItem(`userInfo`, JSON.stringify(userInfo))
    state.userInfo = userInfo;
  },
  //保存菜單
  setRoleInfoList(state,roleInfoList){
    sessionStorage.setItem(`roleInfoList`, JSON.stringify(roleInfoList))
    state.roleInfoList=roleInfoList
  },
  }

const actions = {
  updateToken(context,value){
    context.commit('setToken',value)
  },
  updateUserInfo(context,value){
    context.commit('setUserInfo',value)
  },
  updateRoleInfoList(context,value){
    context.commit('setRoleInfoList',value)
  },
  }
  
 export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
}

在vue組件中：

import {mapState, mapActions, mapMutations} from 'vuex'

export default {
methods: {
//登錄接口
getLoginInfo() {
  http.getLoginInfo({userToken}).then(data => {
    //將獲取到的用戶信息存在vuex中
    this.setUserInfo({userInfo: data});
    this.updateUserInfo(data);
    ......
    this.$message('登錄成功');
  }).catch(e => {
    this.$message(e)
 })
},

...mapActions(`user`,[`updateToken`,`updateUserInfo`,`updateRoleInfoList`]),
...mapMutations(`user`, [`setUserInfo`, `setToken`,  `setRoleInfoList`])
}
}

補充：storage只能存儲字符串的數據，對於JS中常用的數組或對象不能直接存儲。但我們可以通過JSON對象提供的parse和stringify將其他數據類型轉化成字符串，再存儲到storage中就可以了。

var obj = { name:'Jim' };
var str = JSON.stringify(obj);
 
//存入
sessionStorage.obj = str;
//讀取
str = sessionStorage.obj;
//重新轉換為對象
obj = JSON.parse(str);