pinia 支持通过 $onaction 拦截单个 store 的 action,或通过 pinia.use() 实现全局拦截,可在 before、after、onerror 钩子中执行日志、校验、参数修改等逻辑,但不能直接取消 action,仅能通过抛错或修改 args 间接控制。

可以通过 Pinia 的插件机制,在 action 执行前后插入自定义逻辑,实现拦截、日志、权限校验或参数修改等目的。
使用 store.$onAction 拦截单个 store 的 action
每个 Pinia store 实例都提供 $onAction 方法,用于监听其所有 action 的调用生命周期。它支持在 action 开始前(before)和结束后(after)执行回调,还能捕获异常(onError)。
-
before:可访问 action 名称、参数、是否被调用(
store上下文),适合做参数校验或埋点 - after:可拿到返回值,适合做结果处理或缓存更新
- onError:捕获 action 内抛出的错误,便于统一错误上报或降级
示例:
const useCounterStore = defineStore('counter', {state: () => ({ count: 0 }),
actions: {
increment(n = 1) {
this.count += n;
}
}
});
const store = useCounterStore();
store.$onAction(({ name, args, after, onError }) => {
console.log(`即将执行 action: ${name}`, args);
after((result) => console.log(`${name} 执行完成,返回:`, result));
onError((error) => console.error(`${name} 失败:`, error));
});
通过全局插件统一拦截所有 store 的 action
在创建 pinia 实例后,用 pinia.use() 注册插件,内部遍历所有 store 并批量调用 $onAction,实现全局拦截。
- 插件函数接收一个
{ store }对象,其中store是当前初始化的 store 实例 - 在插件内调用
store.$onAction即可为该 store 添加拦截逻辑 - 适合统一日志、性能监控、请求节流、权限拦截等跨 store 场景
示例(记录所有 action 调用耗时):
pinia.use(({ store }) => {store.$onAction((hook) => {
const start = Date.now();
hook.after(() => {
console.log(`${store.$id}.${hook.name} 耗时: ${Date.now() - start}ms`);
});
});
});
拦截中修改参数或阻止 action 执行
Pinia 的 $onAction.before 回调本身不支持直接“取消” action,但可通过以下方式间接控制:
-
抛出错误:在
before中 throw 异常,action 将不会执行(需配合onError做兜底) -
修改 args 数组:
args是引用传递,可安全修改参数内容(如过滤敏感字段、注入上下文) - 结合状态判断:例如检查用户权限、网络状态,不满足条件则提前报错或静默忽略
注意:不能从 before 回调中 return false 或类似值来阻止执行 —— Pinia 不识别该语义。
注意事项与边界情况
拦截逻辑运行在 action 执行的同步上下文中,因此需避免在 before/after 中做异步等待(如 await),否则会破坏 action 的同步性假设。
- 如果需要异步前置检查(如鉴权 API),建议将检查逻辑提前到 action 内部,或改用组合式逻辑封装
-
$onAction不监听 computed 或 state 直接变更,只针对actions函数调用 - 插件对已创建的 store 生效;新 store 创建时才会触发插件函数










