在 Pinia 里编写中间件主要是通过自定义插件来模拟实现，目前并没有官方提供的其他标准方法。不过我们可以深入探讨基于自定义插件这种方式的更多拓展思路，下面为你详细介绍：
基于自定义插件的不同实现思路
1. 利用 $subscribe 方法
$subscribe 是 Pinia store 提供的一个方法，它可以监听状态的变化。你可以在状态变化前后执行一些逻辑，从而达到类似中间件的效果。
import {
defineStore } from 'pinia';
// 定义一个 store
const useCounterStore = defineStore('counter', {
state: () => ({
count: 0
}),
actions: {
increment() {
this.count++;
}
}
});
// 创建 store 实例
const counterStore = useCounterStore();
// 使用 $subscribe 方法实现类似中间件的逻辑
counterStore.$subscribe((mutation, state) => {
// 在状态变化前执行逻辑
console.log('Before state change:', state);
// 这里可以添加权限验证、日志记录等逻辑
console.log('Mutation:', mutation);
// 在状态变化后执行逻辑
console.log('After state change:', counterStore.$state);
});
// 触发 action 改变状态
counterStore.increment();
在上述代码中，通过 $subscribe 方法监听状态的变化，在状态变化前后执行了日志记录的逻辑。不过这种方式主要是针对状态变化进行监听，与传统意义上在 action 执行前后的中间件逻辑略有不同，它更侧重于状态本身的变化。
2. 封装 action 调用
你可以创建一个高阶函数来封装 action 的调用，在这个高阶函数中添加额外的逻辑，以此模拟中间件的功能。
import {
defineStore } from 'pinia';
// 定义一个 store
const useCounterStore = defineStore('counter', {
state: () => ({
count: 0
}),
actions: {
increment() {
this.count++;
}
}
});
// 创建一个高阶函数来封装 action 调用
function withMiddleware(action) {
return async (...args) => {
// 在 action 执行前执行逻辑
console.log('Before action:', args);
try {
const result = await action(...args);
// 在 action 执行后执行逻辑
console.log('After action:', result);
return result;
} catch (error) {
// 处理 action 执行过程中的错误
console.error('Action error:', error);
throw error;
}
};
}
// 创建 store 实例
const counterStore = useCounterStore();
// 使用高阶函数封装 action
const incrementWithMiddleware = withMiddleware(counterStore.increment);
// 调用封装后的 action
incrementWithMiddleware();
在这个例子中，withMiddleware 函数接收一个 action 作为参数，返回一个新的函数。在新函数中，先执行了日志记录的逻辑，然后调用原始的 action，最后再执行一些后续的逻辑。这种方式可以灵活地对不同的 action 进行封装，但需要手动对每个 action 进行封装操作。
总结
虽然 Pinia 没有官方的中间件机制，但通过自定义插件、$subscribe 方法以及封装 action 调用等方式，都可以在一定程度上模拟中间件的功能，根据具体的业务需求选择合适的实现方式。
