三分鐘開發(fā)一個(gè) Vuex-Persistedstate，你學(xué)會(huì)了嗎？
Hello，大家好，我是 Sunday。
vuex-persistedstate 是一個(gè) 基于 vuex 的 狀態(tài)緩存工具 ，它可以讓我們 刷新頁(yè)面時(shí)持久化 state 中的狀態(tài)。
不過(guò)，這個(gè)庫(kù)在 3年前 已經(jīng) 停止維護(hù)了，當(dāng)它配合 Vue3 + Vuex4 進(jìn)行使用時(shí)會(huì)出現(xiàn)一些奇怪的錯(cuò)誤。
因此，在兩年前我簡(jiǎn)單實(shí)現(xiàn)了一個(gè) vuex-plugin-persistedstate 用于解決 Vue3 + Vuex4 的狀態(tài)持久化問(wèn)題。實(shí)現(xiàn)了之后，就一直沒(méi)有管它。
讓我沒(méi)想到的是，昨天登錄 npm 發(fā)現(xiàn)竟然還有 200 多的下載量：
圖片
這證明大家對(duì)于 vuex-persistedstate 的需求存在的。
因此，今天就借助這個(gè)庫(kù)的代碼，講解下 vuex-persistedstate 的原理，讓大家也可以花 3 分鐘的時(shí)間 實(shí)現(xiàn)一個(gè) vuex-persistedstate。
persistedstate 的原理
persistedstate 的原理其實(shí)非常簡(jiǎn)單，核心是兩個(gè)點(diǎn)：
- 如何把 state 中的數(shù)據(jù)進(jìn)行持久化
- 如何把持久化的數(shù)據(jù)賦值給 state
1.1 如何把 state 中的數(shù)據(jù)進(jìn)行持久化
想要把 state 中的數(shù)據(jù)進(jìn)行持久化，說(shuō)白了就是：監(jiān)聽(tīng) mutation 事件，在每次 mutation 修改數(shù)據(jù)后，同步數(shù)據(jù)到 localStorage 中
那么如何監(jiān)聽(tīng) mutation 事件 呢？
根據(jù) vuex 文檔描述，我們可以直接通過(guò) store.subscribe 方法監(jiān)聽(tīng) mutation 提交后的操作：
圖片
1.2 如何把持久化的數(shù)據(jù)賦值給 state
從 localStorage 中獲取數(shù)據(jù)非常簡(jiǎn)單，問(wèn)題在于 如何保證在刷新頁(yè)面后，從 localStorage 中獲取數(shù)據(jù)呢？
因?yàn)?nbsp;vuex 本質(zhì)上是一個(gè)單例的對(duì)象，該對(duì)象保存在內(nèi)存中。即：只有頁(yè)面刷新時(shí)，vuex 才會(huì)重新執(zhí)行初始化操作。
所以，根據(jù)這個(gè)概念，我們可知：只要執(zhí)行了初始化操作，那么就以為著內(nèi)存緩存消失，就需要從從 localStorage 中獲取數(shù)據(jù)了。
因此，我們只需要在 plugin 觸發(fā)時(shí)，讀取數(shù)據(jù)即可。
代碼實(shí)現(xiàn)
首先，創(chuàng)建一個(gè)基于 ts 的項(xiàng)目，大致結(jié)構(gòu)如下（核心關(guān)注 src 中的代碼結(jié)構(gòu)）：
圖片
根據(jù)結(jié)構(gòu)可知，整體的代碼非常簡(jiǎn)單（src 中的代碼）一共只有 4 個(gè)文件。
2.1 入口文件 index.ts
在 index.ts 中，我們需要按照 vuex-plugin 的要求，構(gòu)建一個(gè)基本的函數(shù)。
根據(jù)原理中描述，我們需要再這里做兩件事情：
- 只要該函數(shù)執(zhí)行，就從緩存中讀取數(shù)據(jù)
- 利用 store.subscribe 監(jiān)聽(tīng) mutation 行為
import { Options, defaultOptions } from './core/options'
import { MutationPayload, Store } from 'vuex'
import { matchPaths } from './core/persistedstate'
let catchData: object = {}
export default function VuexPersistedstate<State>({
key = defaultOptions.key,
paths = defaultOptions.paths,
storage = defaultOptions.storage,
fetchBeforeUse = defaultOptions.fetchBeforeUse,
fetchBeforeUseFn = defaultOptions.fetchBeforeUseFn
}: Options<State> = defaultOptions) {
// 讀取緩存文件
if (fetchBeforeUse) {
catchData = fetchBeforeUseFn(key, storage)
}
return (store: Store<State>) => {
// 存儲(chǔ)緩存數(shù)據(jù)
for (const key in catchData) {
if (Object.prototype.hasOwnProperty.call(catchData, key)) {
const value = catchData[key]
store.commit(key, value)
}
}
// 每次 mutation 后接收通知
// { type, payload }
store.subscribe((mutation: MutationPayload, state: State) => {
if (matchPaths(paths, mutation)) {
catchData[mutation.type] = mutation.payload
storage.setItem(key, catchData)
}
})
}
}在這里，我們會(huì)用到 core 中的一些依賴庫(kù)。
2.2：options 可配置參數(shù)
core/options 中的代碼主要提供了 可配置參數(shù)，所以核心由 接口 + 默認(rèn)配置對(duì)象 組成
import storage, { Storage } from './storage'
export interface Options<State> {
/**
* localStorage 保存的 key
*/
key: string
/**
* 緩存模塊名稱
* 不通過(guò)意味著緩存所有
* 僅傳遞指定的緩存
*/
paths: string[]
/**
* storage
*/
storage: Storage
/**
* 是否預(yù)取數(shù)據(jù)
*/
fetchBeforeUse: boolean
/**
* 預(yù)取數(shù)據(jù)的默認(rèn)方法
*/
fetchBeforeUseFn: (key: string, storage: Storage) => any
}
export const defaultOptions: Options<object> = {
key: 'VUEX-PERSISTEDSTATE',
paths: [],
fetchBeforeUse: true,
fetchBeforeUseFn(key: string, storage: Storage) {
return storage.getItem(key)
},
storage
}2.3：storage 持久化邏輯
core/storage 中的代碼主要提供了 持久化邏輯，所以核心由 幾個(gè)溝通 localStorage 的方法 組成
export interface Storage {
getItem: (key: string) => object
setItem: (key: string, value: any) => void
removeItem: (key: string) => void
}
export const getItem = (key: string): object => {
const val = JSON.parse(window.localStorage.getItem(key) as string)
if (!val) {
return {}
}
return val.value || {}
}
export const setItem = (key: string, value: any) => {
let val: object = {
value
}
let valStr = JSON.stringify(val)
window.localStorage.setItem(key, valStr)
}
export const removeItem = (key: string) => {
window.localStorage.removeItem(key)
}
const storage: Storage = {
getItem,
setItem,
removeItem
}
export default storage2.4：persistedstate 匹配邏輯
因?yàn)?nbsp;vuex 中提供了 module 的概念，所以在觸發(fā) mutations 時(shí)可能會(huì)存在 路徑 的概念。
因此，需要在 core/persistedstate 中的進(jìn)行路徑解析
import { MutationPayload } from 'vuex'
/**
* 確定當(dāng)前匹配是否基于路徑的狀態(tài)
*/
export function matchPaths(
paths: string[],
mutation: MutationPayload
): boolean {
if (paths.length === 0) {
return true
}
const moduleName = mutation.type.split('/')[0]
if (!moduleName) {
return false
}
return paths.includes(moduleName)
}總結(jié)
那么到這里，一個(gè)極簡(jiǎn)的 vuex-plugin-persistedstate 就實(shí)現(xiàn)完成了。足以滿足，大多數(shù)情況下的 vuex 持久化存儲(chǔ)邏輯。是不是非常簡(jiǎn)單呢？
