摘要：接下來我們會從上述兩個功能點出發，完成一個持久化插件。在我們的持久化插件中，就是在這個函數內部對數據進行持久化操作。而則整個被監聽，所以任何對于的改動都會被持久化并能夠被恢復。

在做 Vue 相關項目的時候，總會遇到因為頁面刷新導致 Store 內容丟失的情況。復雜的項目往往涉及大量的狀態需要管理，如果僅因為一次刷新就需要全部重新獲取，代價也未免太大了。

那么我們能不能對這些狀態進行本地的持久化呢？答案是可以的，社區里也提供了不少的解決方案，如 vuex-persistedstate，vuex-localstorage 等插件，這些插件都提供了相對完善的功能。當然除了直接使用第三方插件以外，我們自己來 DIY 一個也是非常容易的。

這個持久化插件主要有2個功能：

能夠選擇需要被持久化的數據。

能夠從本地讀取持久化數據并更新至 Store。

接下來我們會從上述兩個功能點出發，完成一個 Vuex 持久化插件。

Gist地址：https://gist.github.com/jrain...
在線體驗地址：https://codepen.io/jrainlau/p...

引用 Vuex 官網 的例子：

Vuex 的 store 接受 plugins 選項，這個選項暴露出每次 mutation 的鉤子。Vuex 插件就是一個函數，它接收 store 作為唯一參數：
const myPlugin = store => {
  // 當 store 初始化后調用
  store.subscribe((mutation, state) => {
    // 每次 mutation 之后調用
    // mutation 的格式為 { type, payload }
  })
}
然后像這樣使用：
const store = new Vuex.Store({
  // ...
  plugins: [myPlugin]
})

一切如此簡單，關鍵的一點就是在插件內部通過 store.subscribe() 來監聽 mutation。在我們的持久化插件中，就是在這個函數內部對數據進行持久化操作。

首選初始化一個插件的主體函數：

const VuexLastingPlugin = function ({
  watch: "*",
  storageKey: "VuexLastingData"
}) {
  return store => {}
}

插件當中的 watch 默認為全選符號 *，允許傳入一個數組，數組的內容為需要被持久化的數據的 key 值，如 ["key1", "key2"] 等。接著便可以去 store.subscribe() 里面對數據進行持久化操作了。

const VuexLastingPlugin = function ({
  watch: "*"
}) {
  return store => {
    store.subscribe((mutation, state) => {
      let watchedDatas = {}
      // 如果為全選，則持久化整個 state 
      // 否則將只持久化被列出的 state
      if (watch === "*") {
        watchedDatas = state
      } else {
        watch.forEach(key => {
          watchedDatas[key] = state[key]
        })
      }
      // 通過 localStorage 持久化
      localStorage && localStorage.setItem(storageKey, JSON.stringify(watchedDatas))
    })
  }
}

按照 Vuex 的規范，有且只有通過 mutation 才能夠修改 state，于是按照上面的步驟，我們便完成了對數據進行實時持久化的工作。

這里也有一個小問題，就是寫入 watch 參數的數組元素必須是 state 當中的最外層 key ，不支持形如 a.b.c 這樣的嵌套 key。這樣的功能顯然不夠完善，所以我們希望可以增加對嵌套 key 的支持。

新建一個工具函數 getObjDeepValue()：

function getObjDeepValue (obj, keysArr) {
  let val = obj
  keysArr.forEach(key => {
    val = val[key]
  })
  return val
}

該函數接收一個對象和一個 key 值數組， 返回對應的值，我們來驗證一下：

var obj = {
  a: {
    name: "aaa",
    b: {
      name: "bbb",
      c: {
        name: "ccc"
      }
    }
  }
}

getObjDeepValue(obj, "a.b.c".split("."))

// => { name: "ccc" }

驗證成功以后，便可以把這個工具函數也放進 store.subscribe() 里使用了：

    store.subscribe((mutation, state) => {
      let watchedDatas = {}
      if (watch === "*") {
        watchedDatas = state
      } else {
        watch.forEach(key => {
          // 形如 a.b.c 這樣的 key 會被保存為 deep_a.b.c 的形式
          if (data.split(".").length > 1) {
            watchedDatas[`deep_${key}`] = getObjDeepValue(state, key.split("."))
          } else {
            watchedDatas[key] = state[key]
          }
        })
      }
      
      localStorage && localStorage.setItem(storageKey, JSON.stringify(watchedDatas))
    })

經過這一改造，通過 watch 寫入的 key 值將支持嵌套的形式，整個插件將會更加靈活。

從上面的步驟我們已經能夠靈活監聽 store 里的數據并持久化它們了，接下來的工作就是完成如何在瀏覽器刷新之后去讀取本地持久化數據，并把它們更新到 store。

為插件添加一個默認為 true 的選項 autoInit，作為是否自動讀取并更新 store 的開關。從功能上來說，刷新瀏覽器之后插件應該自動讀取 localStorage 里面所保存的數據，然后把它們更新到當前的 store。關鍵的點就是如何把 deep_${key} 的值正確賦值到對應的地方，所以我們需要再新建一個工具函數 setObjDeepValue()：

function setObjDeepValue (obj, keysArr, value) {
  let key = keysArr.shift()
  if (keysArr.length) {
    setObjDeepValue(obj[key], keysArr, value)
  } else {
    obj[key] = value
  }
}

該函數接收一個對象，一個 key 值數組，和一個 value ，設置對象對應 key 的值，我們來驗證一下：

var obj = {
  a: {
    name: "aaa",
    b: {
      name: "bbb",
      c: {
        name: "ccc"
      }
    }
  }
}

setObjDeepValue(obj, ["a", "b", "c"], 12345)

/**
obj = {
  a: {
    name: "aaa",
    b: {
      name: "bbb",
      c: 12345
    }
  }
}
*/

有了這個工具方法，就可以正式操作 store 了。

    if (autoInit) {
      const localState = JSON.parse(storage && storage.getItem(storageKey))
      const storeState = store.state
      if (localState) {
        Object.keys(localState).forEach(key => {
          // 形如 deep_a.b.c 形式的值會被賦值到 state.a.b.c 中
          if (key.includes("deep_")) {
            let keysArr = key.replace("deep_", "").split(".")
            setObjDeepValue(storeState, keysArr, localState[key])
            delete localState[key]
          }
        })
        // 通過 Vuex 內置的 store.replaceState 方法修改 store.state
        store.replaceState({ ...storeState, ...localState })
      }
    }

上面這段代碼會在頁面初始化的時候讀取 storage 的值，然后把形如 deep_a.b.c 的值提取并賦值到 store.state.a.b.c 當中，最后通過 store.replaceState() 方法更新整個 store.state 的值。這樣便完成了從本地讀取持久化數據并更新至 Store 的功能。

我們可以寫一個案例，來測試下這個插件的運行情況。

在線體驗：https://codepen.io/jrainlau/p...

import Vue from "vue"
import Vuex from "vuex"
import VuexPlugin from "./vuexPlugin"

Vue.use(Vuex)

export default new Vuex.Store({
  plugins: [VuexPlugin({
    watch: ["a.b.c", "x"]
  })],
  state: {
    a: {
      name: "aaa",
      b: {
        name: "bbb",
        c: {
          name: "ccc"
        }
      }
    },
    x: {
      name: "xxx"
    }
  },
  mutations: {
    updateA (state, val) {
      state.a = val
    },
    updateX (state, val) {
      state.x = val
    }
  }
})

從案例可以看出，我們針對 state.a.b.c 和 state.x 進行了數據持久化。在整個 state.a 都被修改的情況下，僅僅只有 state.a.b.c 被存入了 localStorage ，數據恢復的時候也只修改了這個屬性。而 state.x 則整個被監聽，所以任何對于 state.x 的改動都會被持久化并能夠被恢復。

這個 Vuex 插件僅在瀏覽器環境生效，未曾考慮到 SSR 的情況。有需要的同學可以在此基礎上進行擴展，就不再展開討論了。如果發現文章有任何錯誤或不完善的地方，歡迎留言和我一同探討。