pinia 中 action 无原生中间件，但可通过组合式函数（如 withhooks）、插件（$onaction）或 store 包装器实现前置/后置逻辑；推荐轻量封装，兼顾类型安全与可维护性。
在 Vue 状态管理中（尤其是 Pinia），Action 本身不原生支持“中间件”概念，但可以通过封装、组合式函数或自定义插件机制，在 Action 执行前后注入逻辑——比如日志、错误拦截、加载状态控制、权限校验或请求缓存。
用组合式函数包装 Action
这是最轻量、最推荐的方式：把需要前置/后置逻辑的 Action 封装进一个可复用的函数中。
- 定义一个高阶函数，接收原始 Action 和钩子函数（before/after）
- 返回新函数，在调用前执行 before，在 resolve/reject 后执行 after
- 保持原有 Action 的参数、返回值和类型推导（TypeScript 友好）
示例：
const withHooks = (action, { before, after } = {}) => async (...args) => {before?.(...args);
try {
const result = await action(...args);
after?.(null, result);
return result;
} catch (err) {
after?.(err);
throw err;
}
};
在 store 中使用：
export const useUserStore = defineStore('user', {actions: {
fetchProfile: withHooks(
async function (id) {
return api.get(`/users/${id}`);
}
), {
before: (id) => console.log('开始获取用户', id),
after: (err, data) => err ? console.error('失败') : console.log('成功', data),
}),
}
});
借助 Pinia 插件注入全局拦截能力
Pinia 插件可监听 store 初始化和 action 调用。虽然不能直接“拦截并修改” action 执行流，但可通过 patchState 或元信息打标 + 外部逻辑配合实现类似效果。
- 插件中用 store.$onAction 监听所有 action 调用（支持 before/after 回调）
- 通过 options 配置白名单、跳过条件或上下文标记（如 { meta: { log: true } }）
- 在 before 中设置 loading 状态，在 after 中清理；或统一捕获错误并触发通知
示例插件：
$onAction({ name, store, args, after, onError }) {
// 仅对特定 store 或 action 生效
if (store.$id !== 'user' || !['fetchProfile', 'update'].includes(name)) return;
// 前置：记录开始时间、设 loading
const start = Date.now();
store.$patch({ loading: true });
// 后置：清 loading、打日志
after((result) => {
store.$patch({ loading: false });
console.log(`${name} 完成，耗时 ${Date.now() - start}ms`);
});
// 异常：统一处理
onError((error) => {
store.$patch({ loading: false });
notifyError(error.message);
});
}
});
安装插件：pinia.use(createHookPlugin())
用 Store 包装器增强单个 Store
适用于需要深度定制某几个关键 store 的场景。创建一个包装函数，自动为所有 action 注入钩子，并保留原始 store 接口。
- 遍历 store 的 actions，用 withHooks 逐个重写
- 支持传入默认钩子，也支持 action 级别覆盖
- 避免污染原始 store 定义，便于测试和复用
例如：enhanceStore(useUserStore, { before: trackActionStart })，返回一个增强版 store 实例。
注意事项与边界
Vue 响应式系统不跟踪异步操作内部逻辑，所以中间件里的副作用（如修改 ref、触发事件）需确保在正确的响应式上下文中执行。
- 不要在 before 中直接修改 store state（除非明确知道副作用时机）；优先用 $patch 或 action 内部更新
- $onAction 是运行时监听，无法做编译期静态分析或类型约束，建议搭配命名规范 + TypeScript 类型守卫
- 避免嵌套过深的钩子包装，否则堆栈难调试；高频 action（如输入联动）慎加重量级逻辑
本质上，Vue 的响应式哲学倾向显式而非隐式——比起“魔法中间件”，更鼓励把关键流程（如 loading、错误、权限）作为业务逻辑的一部分，自然地组织在 Action 内部或组合式函数中。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
