Vue 状态管理的中间件实现-Vue.js-PHP中文网

vue 无内置中间件，但可通过 pinia 的 $onaction 实现 action 中间件，支持 before/after/onerror 钩子；用 watch/computed 拦截 state 变更；通过插件机制实现全局中间件；组件内可用组合式函数模拟轻量中间件。

vue 状态管理的中间件实现

Vue 本身没有内置“中间件”概念，但可以在状态管理（尤其是 Pinia）中模拟类似中间件的行为，用于拦截、增强或响应 state 的变更、action 的执行或 mutation 的触发。

Pinia 中的 action 中间件

Pinia 支持在 store 的 action 上注册中间件，它会在 action 执行前后运行，适合做日志、权限校验、请求节流、错误统一处理等。

通过 store.$onAction() 注册，支持前置（before）、后置（after）和异常（onError）钩子
中间件函数接收一个 context 对象，含 name（action 名）、args（参数）、store（当前 store 实例）、after（回调）和 cancel（中断执行）
调用 context.cancel() 可阻止 action 执行，常用于权限拦截

示例：添加请求前 loading 状态与错误捕获

store.$onAction(({ name, args, after, onError }) => {
  console.log(`[Action] ${name} started with`, args);
  // 前置：设置 loading
  store.loading = true;

  // 后置：清除 loading
  after(() => {
    store.loading = false;
  });

  // 异常：统一提示
  onError((error) => {
    console.error(`[Action Error] ${name}:`, error);
    store.error = error.message;
  });
});

State 变更的响应式拦截（computed + watch 组合）

虽然无法像 Redux 那样直接拦截 mutation，但可通过 watch 监听 state 变化，或用 computed 封装派生逻辑，实现“副作用中间件”效果。

check-vue-style

检查 .vue 单文件组件的 CSS 规范问题并给出提示，适用于样式检查、CSS审查和 Vue 页面质量巡检。

下载

对敏感字段（如 user.token）使用 watch 持久化到 localStorage 或触发认证刷新
用 computed 包裹 getter，自动注入格式化、权限过滤等逻辑
避免在 watch 回调中直接修改被监听的 state，防止循环触发

自定义插件扩展全局中间件能力

Pinia 插件机制允许你为所有 store 注入通用逻辑，是实现跨 store 中间件的最佳方式。

插件函数接收 { store } 参数，可访问 store.$state、store.$onAction 等
适合注入日志上报、性能追踪、状态快照、devtools 集成等基础设施能力
通过 store.$subscribe() 监听 state 变更（类似 Redux 的 subscribe），获取变更前后的 state 快照

示例：记录每次 state 变更的 diff

export const loggerPlugin = ({ store }) => {
  store.$subscribe((mutation, state) => {
    console.log(`[State Change] ${mutation.type}`, {
      payload: mutation.payload,
      newState: { ...state }
    });
  });
};

// 使用
pinia.use(loggerPlugin);