大家好，我是苏先生，一名热爱钻研、乐于分享的前端工程师，跟大家分享一句我很喜欢的话：人活着，其实就是一种心态，你若觉得快乐，幸福便无处不在 ## [github与好文](https://github.com/supanpanCn/blob/tree/main) * [TypeScript知识点和99个类型体操-专栏-每周更新](https://juejin.cn/column/7233765235953205304) * [vue3核心原理精讲-专栏-持续更新中...](https://juejin.cn/column/7235237072439967799) - [如何把localStorage玩出花儿](https://juejin.cn/post/7212539744676528186) ## 你可以从本文学到什么 1.如何开发一个`pinia`插件 2.如何开发一个`vite`插件 3.如何开发一个`webpack`插件 ## 前言 [上一篇文章](https://juejin.cn/post/7249397451055497253)，我们详细对比了[web-localstorage-plus](https://github.com/supanpanCn/web-localstorage-plus)和[pinia-plugin-persistedstate](https://github.com/prazdevs/pinia-plugin-persistedstate/tree/2cdbe7d5956c74db2720c4263085154b26205644)这两个npm包在持久化存储上的能力。pinia-plugin-persistedstate背靠Pinia，受到了广大开发者的喜爱，于是，笔者眼红了，笔者太太太眼红了啊 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4cf3f9a8f5fc4a44865069889b44949a~tplv-k3u1fbpfcp-watermark.image?) 所以，咱们本文的目的就一个，那就是改造`web-localStorage-plus`，让它能够站在`Pinia`这个巨人的肩膀上 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/347f6beb1409453b882188e3a83eab78~tplv-k3u1fbpfcp-watermark.image?) ## 思考俗话说，兵马未动，粮草先行...... ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/623c8b92fee444f0ae550b6e96bd29be~tplv-k3u1fbpfcp-watermark.image?) 我的意思是，我们要先考虑出来一个方向，然后再动手进行改造🤔 有两个大的方向： - 对原有的`web-localStorage-plus`进行改造是让`Pinia`作为`web-localStorage-plus`的插件还是让`web-localStorage-plus`作为`Pinia`的插件，尽管它们本质的实现都一定是一个符合`Pinia`插件规范的函数，但是这对`web-localStorage-plus`的接口设计却影响很大。比如，如果让`web-localStorage-plus`作为Pinia的插件，则必须在`web-localStorage-plus`内部重新单独导出一个函数，但如果是反过来的话，则恰好可以利用`web-localStorage-plus`本身的`use`接口想要实现这一点，只需要对原有的`use`接口进行改造即可，如下 ```ts // src/core/api/use.ts function use(pinia:Pinia):FalsyValue; function use(...):FalsyValue; function use(type: PluginCb | Pinia, framework?: "customer" | "buildIn") { if(typeof type === 'function'){ ... return } runAsPiniaPlugin(type,native) } ``` - 新开发一个`npm`包考虑到需要对热更新进行支持，如果采取方案一，则会让`web-localStorage-plus`包变的不纯粹，因为它不应该与`pinia`、`vite`、`webpack`强相关 ## 实现 ### 补充Pinia实例类型首先，我们找到`Pinia`中`defineStore`的类型定义 ```ts export declare function defineStore<...>(id: Id, options: Omit, 'id'>): ...; ``` `options`即我们要扩展的部分 ```ts options: Omit ``` 进入`DefineStoreOptions`，它扩展自`DefineStoreOptionsBase` ```ts export declare interface DefineStoreOptions extends DefineStoreOptionsBase> { ... } ``` 找到`DefineStoreOptionsBase`，它是一个空的interface ```ts export declare interface DefineStoreOptionsBase { } ``` 故我们借助`DefineStoreOptionsBase`为`Pinia`补充TypeScript类型 ```ts // src/helper/types.ts export interface PersistedStateOptions { namespace?: string ; paths?: Array; } export interface DefineStoreOptionsBase { persist?: boolean | PersistedStateOptions } ``` 同理，借助`PiniaCustomProperties`为`hmr`设计TypeScript类型 ```ts export interface PiniaCustomProperties { $hydrate: (payload: { state: StateTree; persist: boolean | PersistedStateOptions; }) => void; $discard: (id: string) => void; } ``` ### 初始化首先，使用`web-localStorage-plus`创建一个命名空间，后续pinia相关的状态都设置到该空间下 ```ts function initSpaceForPinia(ctx: This) { const hasSpace = ctx.getItem(NAMESPACE); if (hasSpace) return; ctx.setItem(NAMESPACE, {}); } ``` 接着，将其注册为`pinia`插件 ```ts pinia.use(internalPiniaPlugin(ctx)); ``` ### 状态激活当刷新页面后，我们从`web-localStorage-plus`存储中取出对应的状态并重新设置给pinia，这其实分为两种情况，当store已经存在时，此时用于从`web-localStorage-plus`向`pinia`激活，否则说明是进行初始化，需要将`pinia`中的状态保存到`web-localStorage-plus`中 ```ts function activateState(payload: Params) { const { key, ctx, piniaCtx, paths, state } = payload; if (spaceToStoreId.has(key)) { const store = ctx.getItem(key, NAMESPACE); if (store) { const latest = updateStore(paths, store, ctx, key, state); piniaCtx.$patch(latest); return; } persistState(payload); } } ``` ### 保持响应当`Pinia`中的状态发生改变时，我们要对其进行同步更新，这只需要监听`store.$subscribe`方法，当其回调后调用`persistState`即可如下，我们实际上是将state中的值按paths排除后重新向本地更新了一份 ```ts function persistState(payload: Omit) { const { key, ctx, paths, state } = payload; if (spaceToStoreId.has(key)) { for (let i = 0; i < paths.length; i++) { const v = paths[i]; const rest = paths.slice(i + 1); const index = rest.findIndex((r) => r.startsWith(v)); if (index > -1) { paths.splice(i + index, 1); i--; } } ctx.setItem(key, pick(state, paths), NAMESPACE); } } ``` ### paths配置项的更新当`paths`配置项改变时，应当重新设置`web-localStorage-plus`下对应命名空间的值，由于将`paths`设置到`localStorage`是一个冗余的字段，故需要与localStorage中的存储值进行比较更新，这无外乎有以下几种情况： - paths新增了key 此时，需要将新增的`key`对应的`state`中的内容更新到`localStorage` - paths删除了key 此时，需要找到`localStorage`中的`key`进行删除 - 使用persist配置项代替对象配置此时，按照`state`全量更新到`localStorage` 虽然，情况是这么个情况，但是在实际开发中，并不需要严格按照此分类进行讨论，笔者这里采取对象合并的形式来进行统一，首先要根据paths初始化一个空对象 ```ts let processingObj = helpers.createObjByPaths(paths, state); ``` 接着分别与`web-localStorage-plus`和`pinia`的`state`进行对象合并 ```ts const _mergeStoreCb = (objValue: any, srcValue: any) => { if (isObject(objValue) && isObject(srcValue)) { return helpers.mergeDeep(objValue, srcValue, _mergeStoreCb); } if (objValue === undefined) { return deleteFlag; } if (!helpers.isSameType(objValue, srcValue)) { return objValue; } }; ``` 最后，重新设置到`web-localStorage-plus`即可 ```ts ctx.setItem(key, processingObj, NAMESPACE); ``` ### 处理热更新当热更新时，需要同步更新`web-localStorage-plus`的存储值。这以存储的唯一凭证`id`是否改变分为两类： id不变时，调用`hydrate`将`state`中的值持久化到本地 ```ts ctx.$hydrate?.({ ...JSON.parse(msg.data), id, }); ``` id改变时，需要打印出提示，并且将原仓库从`web-localStorage-plus`中删除 ```ts if (id !== initialUseStore.$id && initialUseStore) { console.warn( `[@web-localstorage-plus/pinia]:检测到存储库的id从"${initialUseStore.$id}"变成"${id}"了` ); initialUseStore(pinia, pinia._s.get(initialUseStore.$id)!).$discard?.(initialUseStore.$id); useStore(pinia, pinia._s.get(id)!); } ``` ### 开发plugin 目前来说，对用户是相当繁琐的存在，因为其不得不手动的在每一个`pinia`模块内设置和调用 ```ts if (import.meta.hot) import.meta.hot.accept(acceptHMRUpdateWithHydration(useStore, import.meta.hot)) ``` 因此，最好的方式是写一个`plugin`帮用户做这件事情，笔者这里暂时只提供对`vite`和`webpack`的支持。它们的思路很简单，即：对源码进行识别，识别到可用的`pinia`模块后，将热更新相关的代码帮助用户进行注入即可 ```ts export default function transform(code: string, id: string) { let { apiName, stopIndex } = extractApi(code); if (apiName) { const api = extractRegisterApi(code.slice(stopIndex), apiName); if (api) { const s = new MagicString(code); s.prepend( `import { acceptHMRUpdateWithHydration } from '@web-localstorage-plus/pinia';\n` ); s.append(`if (import.meta.hot)\n`); s.append( ` import.meta.hot.accept(acceptHMRUpdateWithHydration(${api}, import.meta.hot));\n` ); return { code: s.toString(), map: s.generateMap({ source: id, includeContent: true }), }; } } } ``` 至于`vite`和`webpack`的支持，笔者并没有选用第三方库来做，因为用到的`hook`太有限了 - vite `vite`只需要配置`transform`钩子即可 ```ts export default function vitePlugin(folder: string): Plugin { return { name: "vite:web-localstorage-plus-pinia-hmr", transform, }; } ``` - webpack `webpack`则需要将其作为`loader`使用 ```ts compiler.options.module.rules.unshift({ enforce: "pre", use, }); ``` 需要注意的是，由于`vite`对`node`内建模块的不兼容，我们需要采取动态导入的形式来生成`loader`的指向地址 ```ts import("node:path").then(mod=>{ mod.resolve(...) }) ``` 还有一点，就是需要在`use`函数中生成`fileId`，因为在`transfrom`的实际函数体内拿不到`id`，这会导致在`vite`中正常运行的`transform`出错 ```ts let fileId = data.resource + (data.resourceQuery || ""); ``` 最后，导出一个函数单独处理id的获取并在transform中调用即可 ```ts export async function getFileId(id: string) { if (webpackContext.folder) { return webpackContext.fileId; } return id; } ``` ## 使用 - 安装依赖 ```ts yarn add web-localstorage-plus yarn add @web-localstorage-plus/pinia ``` - 在`main.ts`中设置持久化 ```ts import createStorage from 'web-localstorage-plus'; import setPiniaPersist from '@web-localstorage-plus/pinia'; // 设置根存储库 createStorage({ rootName: 'spp-storage', }); // 将pinia中的数据持久化到本地 setPiniaPersist(pinia); ``` - 在`vite.config.ts`中引入热更新插件 ```ts import { getPlugin } from '@web-localstorage-plus/pinia'; const piniaHmrPlugin = getPlugin('vite'); export default defineConfig({ ..., plugins:[piniaHmrPlugin(resolve(__dirname, 'src/store'))] }) ``` *** 如果本文对您有用，希望能得到您的点赞和收藏 **订阅专栏**，每周更新1-2篇类型体操，每月1-3篇vue3源码解析，等你哟😎