使用Vuex時發(fā)現(xiàn)頁面刷新以后Vuex里面存儲的state數(shù)據(jù)會丟失，因為我們的state都是存儲在內(nèi)存中的。
解決辦法就是將Vuex中的數(shù)據(jù)存儲在本地localStorage中。
1、在mutations中將數(shù)據(jù)同步保存到localStorage中

SET_USERINFO: (state, userInfo) => {
      state.userInfo = userInfo
      localStorage.setItem('userInfo', JSON.stringify(state.userInfo))
    }

2、在actions取數(shù)據(jù)時從localStorage取出數(shù)據(jù)，存入Vuex保證同步

    // 獲取用戶信息
    GetUserInfo({ commit, state }) {
      // 防止頁面刷新vuex中的數(shù)據(jù)丟失
      for (var item in state) {
        localStorage.getItem(item) ? state[item] = JSON.parse(localStorage.getItem(item)) : false
      }
      return new Promise((resolve, reject) => {
        getUserInfo({ token: state.token, userCode: state.userInfo.userCode }).then(response => {
          if (!response.data) { // 由于mockjs 不支持自定義狀態(tài)碼只能這樣hack
            reject('error')
          }
          const data = response.data
          if (data.user) {
            commit('SET_USERINFO', data.user)
          }
          resolve(response)
        }).catch(error => {
          reject(error)
        })
      })
    },

3、退出登錄時同步移除localStorage中的數(shù)據(jù)

// 登出
    LogOut({ commit, state }) {
      return new Promise((resolve, reject) => {
        logout(state.token).then(() => {
          commit('SET_USERINFO', {})
          for (var item in state) {
            localStorage.removeItem(item)
          }
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    },