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, //指定存储方式,默认为localStorage
    paths: ["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