vuex-persistedstate源码解析
上次在写前端状态持久化的那篇文章中说到了有机会就会讲解下 vuex-persistedstate 这个持久化插件,毕竟埋了坑不填还是不好 😏,下面我会讲 vuex-persistedstate 源码比较重要的一些代码。下面先上源码:
# 源码
import { Store, MutationPayload } from "vuex";
import merge from "deepmerge";
import * as shvl from "shvl";
interface Storage {
getItem: (key: string) => any;
setItem: (key: string, value: any) => void;
removeItem: (key: string) => void;
}
interface Options {
key?: string;
paths?: string[];
reducer?: (state: any, paths: string[]) => object;
subscriber?: (
store: typeof Store
) => (handler: (mutation: any, state: any) => void) => void;
storage?: Storage;
getState?: (key: string, storage: Storage) => any;
setState?: (key: string, state: typeof Store, storage: Storage) => void;
filter?: (mutation: MutationPayload) => boolean;
arrayMerger?: (state: any, saved: any) => any;
rehydrated?: (store: typeof Store) => void;
fetchBeforeUse?: boolean;
overwrite?: boolean;
assertStorage?: (storage: Storage) => void | Error;
}
export default function(options?: Options) {
options = options || {};
const storage = options.storage || (window && window.localStorage);
const key = options.key || "vuex";
function getState(key, storage) {
let value;
try {
return (value = storage.getItem(key)) && typeof value !== "undefined"
? JSON.parse(value)
: undefined;
} catch (err) {}
return undefined;
}
function filter() {
return true;
}
function setState(key, state, storage) {
return storage.setItem(key, JSON.stringify(state));
}
function reducer(state, paths) {
return Array.isArray(paths)
? paths.reduce(function(substate, path) {
return shvl.set(substate, path, shvl.get(state, path));
}, {})
: state;
}
function subscriber(store) {
return function(handler) {
return store.subscribe(handler);
};
}
const assertStorage =
options.assertStorage ||
(() => {
storage.setItem("@@", 1);
storage.removeItem("@@");
});
assertStorage(storage);
const fetchSavedState = () => (options.getState || getState)(key, storage);
let savedState;
if (options.fetchBeforeUse) {
savedState = fetchSavedState();
}
return function(store) {
if (!options.fetchBeforeUse) {
savedState = fetchSavedState();
}
if (typeof savedState === "object" && savedState !== null) {
store.replaceState(
options.overwrite
? savedState
: merge(store.state, savedState, {
arrayMerge:
options.arrayMerger ||
function(store, saved) {
return saved;
},
clone: false,
})
);
(options.rehydrated || function() {})(store);
}
(options.subscriber || subscriber)(store)(function(mutation, state) {
if ((options.filter || filter)(mutation)) {
(options.setState || setState)(
key,
(options.reducer || reducer)(state, options.paths),
storage
);
}
});
};
}
能看懂的可以右上角了,看不懂或者有点懵但是又有些能看懂的同学们看我们慢慢来解剖:
# 结合源码讲述接口参数字段用途
// 定义要操作本地存储的方法
interface Storage {
getItem: (key: string) => any;
setItem: (key: string, value: any) => void;
removeItem: (key: string) => void;
}
// 设置的参数
interface Options {
key?: string;
paths?: string[];
reducer?: (state: any, paths: string[]) => object;
subscriber?: (
store: typeof Store
) => (handler: (mutation: any, state: any) => void) => void;
storage?: Storage;
getState?: (key: string, storage: Storage) => any;
setState?: (key: string, state: typeof Store, storage: Storage) => void;
filter?: (mutation: MutationPayload) => boolean;
arrayMerger?: (state: any, saved: any) => any;
rehydrated?: (store: typeof Store) => void;
fetchBeforeUse?: boolean;
overwrite?: boolean;
assertStorage?: (storage: Storage) => void | Error;
}
我们来解析 Options 接口中比较重要的参数字段:
# key
key 就是你要存到本地缓存的名字, 默认是 vuex,比如你不选择 Storage 的类型,那么 vuex-persistedstate 就会默认存在 localstorage 里面,等于你的 vuex 的值就会被 localstorage.setItem('vuex', data)存进去。
# paths reducer
这两个字段是配合来使用的,paths 是数组,reducer 是当然可以只传 paths 字段或者只传 reducer,指定只保存的值,可以直接看源码的其中一段就能够明白这两个字段的作用:
function reducer(state, paths) {
return Array.isArray(paths)
? paths.reduce(function(substate, path) {
return shvl.set(substate, path, shvl.get(state, path));
}, {})
: state;
}
# subscriber storage getState setState filter
这四个字段是需要一起来讲的,storage 定义要操作本地存储的方法,目前支持三种:localstorage、sessionstorage、cookie。getState 和 setState 分别定义获取和改变本地储存的指的方法。subscriber 设置 vuex 的 mutaition 订阅的函数,默认是一个 handle => {},filter 则是传入一个函数,这个函数的参数是 vuex 的 mutation,这个参数不触发 setState,这两个参数也是相互配合的,从源码可以看出:
// subscriber的定义
function subscriber(store) {
return function(handler) {
return store.subscribe(handler);
};
}
// filter的定义
function filter() {
return true;
}
(options.subscriber || subscriber)(store)(function(mutation, state) {
if ((options.filter || filter)(mutation)) {
(options.setState || setState)(
key,
(options.reducer || reducer)(state, options.paths),
storage
);
}
});
从上面的代码可以看出subscriber第一次运行之后是返回一个函数,这个函数的也被定义过:
subscriber?: (
store: typeof Store
) => (handler: (mutation: any, state: any) => void) => void;
也就是需要是mutation,跟filter的参数类型是一样的,所以只要不定义subscriber和filter那么就是默认会执行setState去保存vuex的指,如果传入了vuex的mutation(首先你要保证自己写的vuex里面有这个mutation)而且函数返回的是false的话就不会触发保存在定义的storage上。
# 总结
其实这个这库很适合typescript的新手去学习以及模仿,逻辑不会太简单也不会太难,还能巩固下typescript的知识。这个坑算是填完了