在 Vuex 中,如何使用中间件?

简介: 在 Vuex 中,如何使用中间件?

在 Vuex 中,中间件主要通过 插件(Plugins)action 拦截 实现。虽然 Vuex 没有明确的“中间件”概念,但可以通过以下两种方式达到类似效果:

1. 使用 subscribeAction 监听 Action(推荐)

这是 Vuex 官方推荐的方式,通过 store.subscribeAction 监听 action 的执行前后,添加额外逻辑。

示例:日志记录中间件

const logMiddleware = (store) => {
   
  // 监听 action 执行前
  store.subscribeAction((action, state) => {
   
    console.log(`[Before] Action: ${
     action.type}, Payload: ${
     action.payload}`);
  });

  // 监听 action 执行后(包括异步 action)
  store.subscribeAction({
   
    after: (action, state) => {
   
      console.log(`[After] Action: ${
     action.type}`);
    },
    error: (action, error) => {
   
      console.error(`[Error] Action: ${
     action.type}, Error: ${
     error.message}`);
    }
  });
};

// 在创建 store 时注册插件
const store = new Vuex.Store({
   
  // ... 其他配置
  plugins: [logMiddleware]
});
AI 代码解读

示例:权限验证中间件

const permissionMiddleware = (store) => {
   
  store.subscribeAction((action, state) => {
   
    // 需要权限验证的 action
    const protectedActions = ['deleteItem', 'updateUser'];

    if (protectedActions.includes(action.type)) {
   
      const user = state.user;
      if (!user || !user.isAdmin) {
   
        console.error('Permission denied');
        // 阻止 action 继续执行(需结合自定义 dispatch)
        throw new Error('Permission denied');
      }
    }
  });
};
AI 代码解读

2. 重写 store.dispatch 方法

通过拦截 dispatch 方法,可以更精细地控制 action 的执行流程。

示例:自定义 dispatch 中间件

const middlewarePlugin = (store) => {
   
  const originalDispatch = store.dispatch;

  // 重写 dispatch 方法
  store.dispatch = (action) => {
   
    console.log('[Middleware] Before dispatch:', action);

    // 添加自定义逻辑(如权限检查、日志记录)
    if (action.type === 'sensitiveAction') {
   
      if (!store.state.user.isAdmin) {
   
        console.error('Unauthorized');
        return Promise.reject(new Error('Unauthorized'));
      }
    }

    // 执行原始 dispatch
    const result = originalDispatch(action);

    console.log('[Middleware] After dispatch:', action);
    return result;
  };
};

// 注册插件
const store = new Vuex.Store({
   
  plugins: [middlewarePlugin]
});
AI 代码解读

3. 处理异步 Action

对于异步 action,subscribeAction 会在 action 开始和结束时分别触发:

store.subscribeAction({
   
  before: (action, state) => {
   
    console.log(`[Async Before] ${
     action.type}`);
  },
  after: (action, state) => {
   
    console.log(`[Async After] ${
     action.type}`);
  }
});

// 异步 action
actions: {
   
  async fetchData({
    commit }) {
   
    commit('SET_LOADING', true);
    try {
   
      const response = await fetch('/api/data');
      commit('SET_DATA', await response.json());
    } finally {
   
      commit('SET_LOADING', false);
    }
  }
}
AI 代码解读

4. 多个中间件的执行顺序

插件按注册顺序执行,先注册的中间件会先执行:

const middleware1 = (store) => {
    /* ... */ };
const middleware2 = (store) => {
    /* ... */ };

const store = new Vuex.Store({
   
  plugins: [middleware1, middleware2] // 先执行 middleware1
});
AI 代码解读

5. 注意事项

  1. 避免副作用:中间件应保持纯粹,避免直接修改 state 或产生其他副作用。
  2. 性能考虑:过多或复杂的中间件会增加 action 执行的延迟,尤其是在高频触发场景下。
  3. 与 Vuex 插件区分:中间件主要关注 action 流程,而插件可用于更广泛的场景(如状态持久化)。

总结

Vuex 的中间件通过 插件 + action 监听 实现,核心是利用 subscribeAction 或重写 dispatch 方法。这种方式能在不改变 Vuex 核心逻辑的前提下,灵活添加额外功能(如日志、权限、错误处理)。

目录
相关文章
Vuex 中间件和 Pinia 中间件的性能有何区别?
Vuex 中间件和 Pinia 中间件的性能有何区别?
179 74
对比 Vuex 和 Pinia 中间件在不同场景下的性能表现
对比 Vuex 和 Pinia 中间件在不同场景下的性能表现
235 76
|
2月前
|
在 Vuex 中,中间件和插件的执行顺序是怎样的?
在 Vuex 中,中间件和插件的执行顺序是怎样的?
205 72
|
2月前
|
如何在 Vuex 中实现类似 Pinia 中间件的功能?
如何在 Vuex 中实现类似 Pinia 中间件的功能?
166 71
消息中间件的选择:RabbitMQ是一个明智的选择
消息中间件的选择:RabbitMQ是一个明智的选择
188 0
【消息中间件】详解三大MQ:RabbitMQ、RocketMQ、Kafka
【消息中间件】详解三大MQ:RabbitMQ、RocketMQ、Kafka
7868 0
Docker部署RabbitMQ消息中间件
【7月更文挑战第4天】Docker部署RabbitMQ消息中间件
365 3
【Docker项目实战】Docker部署RabbitMQ消息中间件
【10月更文挑战第8天】Docker部署RabbitMQ消息中间件
338 2
【Docker项目实战】Docker部署RabbitMQ消息中间件
消息中间件RabbitMQ---SpringBoot整合RabbitMQ【三】
这篇文章是关于如何在SpringBoot应用中整合RabbitMQ的消息中间件。内容包括了在SpringBoot项目中添加RabbitMQ的依赖、配置文件设置、启动类注解,以及如何通过单元测试来创建交换器、队列、绑定,并发送和接收消息。文章还介绍了如何配置消息转换器以支持对象的序列化和反序列化,以及如何使用注解`@RabbitListener`来接收消息。
消息中间件RabbitMQ---SpringBoot整合RabbitMQ【三】
消息中间件RabbitMQ---Docker安装RabbitMQ、以及RabbitMQ的基本使用【二】
这篇文章提供了RabbitMQ的安装和基本使用教程,包括如何使用Docker拉取RabbitMQ镜像、创建容器、通过浏览器访问管理界面,以及如何创建交换机、队列、绑定和使用direct、fanout和topic三种类型的交换器进行消息发布和接收的测试。
消息中间件RabbitMQ---Docker安装RabbitMQ、以及RabbitMQ的基本使用【二】
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问