vuex刷新之後數據丟失，各種解決方案,vuex-persistedstate

爲什麼刷新之後vuex的狀態就沒了？
原因是刷新之後js初始化，vuex重新初始化了；
常見的解決方案有
1，mounted裏面調接口重新給state賦值，太麻煩，pass
2，watch裏面監聽state,再賦值，也很low
vuex理解不透徹的可以先看看
完美方案是利用sessionStorage/localStorage,做一個暫時的儲存
store的模塊化結構

主要是針對mutations 和 getters 做一個簡單的賦值和取值封裝
mutations.js改變state的同時在本地做一個備份

const setStorage = (key, value) => {
  if (typeof (value) === 'object') {
    value = JSON.stringify(value)
  }
  sessionStorage.setItem(key, value)
}
/*
* 避免刷新之後vuex被重置，在sessionStorage做一個備份
 */
const mutations = {
  set_userInfo (state, payload) {
    state.userInfo = payload
    setStorage('userInfo', payload)
  },
  set_token (state, payload) {
    state.token = payload
    setStorage('token', payload)
  },
  set_roles (state, payload) {
    state.roles = payload
    setStorage('roles', payload)
  },
  set_breadcrumb (state, payload) {
    state.breadcrumb = payload
    setStorage('breadcrumb', payload)/*  */
  }
}
export default mutations

getters.js 取值時默認從state裏面取，沒有就從本地拿

import createdRoutes from '@/utils/createdRoutes.js'
import { asyncRoutes } from '@/router/index.js'
let getStoryage = (item) => {
  let str = sessionStorage.getItem(item)
  return JSON.parse(str)
}
const getters = {
  get_userInfo: (state) => {
    return state.userInfo ? state.userInfo : getStoryage('userInfo')
  },
  get_token: (state) => {
    return state.token ? state.token : sessionStorage.getItem('token')
  },
 get_roles: (state) => {
    return state.roles.length ? state.roles : getStoryage('roles')
  },
  addRouters: (state, getters) => {
    let routes = createdRoutes(asyncRoutes, getters.get_roles)
    return routes
  },
  get_breadcrumb: (state, getters) => {
    return state.breadcrumb.length ? state.breadcrumb : getStoryage('getStoryage')
  }
}
export default getters;

在頁面vue文件直接用mapGetters獲取狀態值
這樣一來就算state被清空了，還可以在本地儲存裏面獲取狀態值

後記：

本來想寫一個插件完成上面的事，結果發現一個已經寫好的 vuex-persistedstate
用法：

import state from './state.js'
import getters from './getters.js'
import mutations from './mutations.js'
import actions from './actions.js'
import Vuex from 'vuex'
import Vue from 'vue'
import { deepCopy } from '@/utils/util'
import createPersistedState from "vuex-persistedstate"

Vue.use(Vuex)

let store = new Vuex.Store({
  strict: process.env.NODE_ENV !== 'production',
  state,
  getters,
  mutations,
  actions,
  plugins: [createPersistedState({
    storage: window.sessionStorage,
    reducer (state) {
      let _state = deepCopy(state) // 深拷貝一份 刪除不想保存的
      delete _state.hasLogin
      delete _state.ziYuanLaiYuan
      delete _state.orderStatus
      delete _state.taxPersonType
      return _state
    }
  })]
})

export default store

深拷貝

```bash
/**
 * 深拷貝
 * @param {Array,Object} obj
 */
export const deepCopy = (obj) => {
  // 根據obj的類型判斷是新建一個數組還是一個對象
  let newObj = obj instanceof Array ? [] : {};
  for (let key in obj) {
    // 判斷屬性值的類型，如果是對象遞歸調用深拷貝
    newObj[key] = typeof obj[key] === 'object' ? deepCopy(obj[key]) : obj[key];
  }
  return newObj;
}