【State】Pinia 自定义插件

在 Pinia 中，可以为仓库添加插件，通过插件可以扩展以下内容：

• 为 store 添加新的属性
• 定义 store 时增加新的选项
• 为 store 增加新的方法
• 包装现有的方法
• 改变甚至取消 action
• 实现副作用，如本地存储

首先建议插件单独放置于一个目录下，一个插件其实就是一个方法：

// 几个插件示例
export function myPiniaPlugin1() {
    // 给所有的仓库添加了一条全局属性
    return {
        secret: "the cake is a lie",
    };
}

export function myPiniaPlugin2(context) {
    // console.log(context);
    const { store } = context;
    // 在仓库上扩展状态
    store.test = "this is a test";
}

/**
 * 给特定的仓库来扩展内容
 * @param {*} param0
 */
export function myPiniaPlugin3({ store }) {
    if (store.$id === "counter") {
        // 为当前 id 为 counter 的仓库来扩展属性
        return {
            name: "my name is pinia",
        };
    }
}

/**
 * 重置仓库状态
 */
export function myPiniaPlugin4({ store }) {
    // 我们首先可以将初始状态深拷贝一份
    const state = deepClone(store.$state);
    // 提供一个 reset 方法可以重置仓库状态
    store.reset = () => {
        store.$patch(deepClone(state));
    };
}

每个插件扩展内容，其实就是对仓库进行内容扩展。如果想要针对某一个仓库进行内容扩展，可以通过 context.store.$id 来指定某一个仓库来扩展内容。

插件书写完毕后，需要通过 pinia 实例对插件进行一个注册操作:

// 引入自定义插件
import {
    myPiniaPlugin1,
    myPiniaPlugin2,
    myPiniaPlugin3,
    myPiniaPlugin4,
} from "./plugins";
// 注册
pinia.use(myPiniaPlugin1);
pinia.use(myPiniaPlugin2);
pinia.use(myPiniaPlugin3);
pinia.use(myPiniaPlugin4);

之后就可以在 store 上使用插件添加的状态或者方法，例如：

// main.js
import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";

// 自定义插件
// 在该自定义插件中，扩展了一个数据和方法
function myPlugin({ store }) {
    store.$state.pluginData = "这是插件添加的数据";

    store.pluginMethod = function () {
        console.log("这是插件添加的方法");
    };
}

const pinia = createPinia();
// 注册自定义插件
pinia.use(myPlugin);

const app = createApp(App);
app.use(pinia);
app.mount("#app");

// store.js
import { defineStore } from "pinia";

export const useMyStore = defineStore("myStore", {
    state: () => ({
        myData: "初始数据",
    }),
    actions: {
        usePluginMethod() {
            this.pluginMethod(); // 使用插件提供的方法
            console.log(this.pluginData); // 访问插件提供的数据
        },
    },
});

实战案例

书写一个插件，该插件用来记录操作日志和捕获错误。

// logPlugin.js
/**
 * 记录操作日志和捕获错误的插件方法
 * @param {*} param0
 */
export function logPlugin({ store }) {
    // 监听所有的action的行为， 当触发了某一个action时会执行传入的回调函数
    /**
     * @param {String} name action名称
     * @param {*} args action执行时传入的参数
     * @param {Function} after action执行完后的回调函数
     * @param {Function} onError action执行出错时的回调函数
     */
    store.$onAction(({ name, args, after, onError }) => {
        const startTime = Date.now();
        console.log(
            `Action ${name} started with arguments: ${JSON.stringify(args)}`
        );

        // action 执行成功后的回调函数
        // result 为 action 返回的结果
        after((result) => {
            // 记录结束时间
            const endTime = Date.now();
            console.log(
                `Action ${name} finished in ${
                    endTime - startTime
                }ms with result: ${JSON.stringify(result)}`
            );
        });

        onError((error) => {
            // 记录结束时间
            const endTime = Date.now();
            console.log(
                `Action ${name} finished in ${
                    endTime - startTime
                }ms with error: ${JSON.stringify(error)}`
            );
        });
    });
}

第三方插件

在 npm 官网搜索关键字 “pinia plugin”，之后根据文档使用。

演示 pinia-plugin-persistedstate 插件的使用。