vue3数据持久化方案：pinia-plugin-persistedstate源码浅析
概述
Pinia是vue3的官方推荐用于数据共享的库，但是Pinia🍍中的数据是存在于浏览器的内存中，当浏览器刷新后，这些数据就会消失。因此我们需要对数据做持久化存储，这个时候就需要用到pinia-plugin-persistedstate。
pinia-plugin-persistedstate本质上利用浏览器持久化存储地能力，默认使用localStorage。本文将详细介绍pinia-plugin-persistedstate的使用以及源码剖析，以vue3项目为例。
pinia-plugin-persistedstate的使用
使用pinia-plugin-persistedstate之前需要安装pinia和pinia-plugin-persistedstate。其使用主要分为两部分
- 在
main.js中引用，如示例：
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);
- 在
store中使用，pinia的defineStore的第二个参数，提供一个persist属性，配置该属性即可。
export const useCommonStore = defineStore("common", {persist: {key: "common", // localStorage的建storage: localStorage, //指定存储方式,默认为localStoragepaths: ["menuActiveIndex", "collapse", "state", "currentMenuList"], // 数组中的为state的键，需要持久化的state放在paths中},
});
- 其效果如下
源码剖析
pinia-plugin-persistedstate是为 pinia量身定制的持久化方案，因此我们需要对pinia有一定的了解，可以参考之前的文章Pinia 源码浅析，PS：该文章会持续更新。本文会只讲解pinia中与pinia-plugin-persistedstate有关的部分。
pinia.use 方法
由上可知，通过pinia.use去使用pinia-plugin-persistedstate，pinia.use实现如下：
use(plugin) {if (!this._a && !isVue2) {toBeInstalled.push(plugin);}else {_p.push(plugin);}return this;
},
该use方法是在createPinia中定义的，调用use方法，首先会判断_a是否存在以及当前是vue2还是vue3，如果当前_a不存在（即还没有调用app.use(pinia)）并且是vue3，则将pinia-plugin-persistedstate插件放到toBeInstalled变量中，否则将插件放到_p中。
放到toBeInstalled的插件会在pinia被vue3实例调用use方法时push到_p中:
toBeInstalled.forEach((plugin) => _p.push(plugin));
由此可知，pinia中的插件全部在_p中。
pinia使用插件
pinia内部使用插件的部分是在createSetupStore中实现的，即defineStore——>useStore——>createSetupStore，其实现如下：
pinia._p.forEach((extender) => {/* istanbul ignore else */if (USE_DEVTOOLS) {//调试部分const extensions = scope.run(() =>extender({store,app: pinia._a,pin