Vuex 中的dispatch与actions详解

目录

Vuex 中的dispatch与actions详解

一、Vuex 商店如一个大公司

二、Actions 是公司里的项目经理

三、Dispatch 是下达任务的指令

四、为什么要用dispatch而不是直接用 actions？

（一）解耦组件与业务逻辑

（二）统一的触发方式

---

在 Vue.js 开发中，Vuex 是一个强大的状态管理模式，而其中的dispatch和actions起着至关重要的作用。

一、Vuex 商店如一个大公司

想象 Vuex 的 store 就像是一个庞大的公司，里面有各个部门和员工协同工作来管理业务流程和数据。

二、Actions 是公司里的项目经理

Actions 就如同公司里的项目经理。他们负责处理复杂的任务和项目，这些任务可能需要花费一些时间，并且可能涉及与外部资源（比如服务器）进行交互。

例如，项目经理可能需要组织一场大型活动。这个活动需要很多准备工作，比如预订场地、邀请嘉宾、安排餐饮等。这些任务可能不能立即完成，需要一些时间来协调和执行。

在 Vuex 中，actions 可以包含异步操作，比如发起 API 请求来获取数据或者向服务器提交数据。它们接收参数，就像项目经理接收项目需求一样，然后协调各种资源来完成任务。

以下是一个简单的 Vuex store 中 actions 的示例代码：

const actions = {
  async someAction({ commit }, payload) {
    // 在这里可以进行异步操作，比如发起 API 请求
    const result = await someAsyncOperation(payload);
    // 然后可以提交一个 mutation 来更新状态
    commit('someMutation', result);
  }
};

三、Dispatch 是下达任务的指令

dispatch就像是公司领导向项目经理下达任务的指令。当你在组件中调用store.dispatch('actionName', payload)时，就相当于领导对某个项目经理说：“我有一个任务要你去完成，这是任务的具体要求（payload）。”

领导（组件）不需要知道项目经理具体是如何完成任务的，只需要知道任务完成后会得到一个结果。同样，组件通过dispatch触发一个 action 后，不需要关心 action 内部的具体实现，只需要知道 action 完成后会更新 store 中的状态，从而影响组件的显示。

例如在组件中使用dispatch：

<template>
  <div>
    <button @click="triggerAction">触发 Action</button>
  </div>
</template>

<script>
import { mapActions } from 'vuex';

export default {
  methods: {
   ...mapActions(['someAction']),
    triggerAction() {
      this.someAction(someData);
    }
  }
};
</script>

四、为什么要用dispatch而不是直接用 actions？

（一）解耦组件与业务逻辑

1. 保持组件的简洁性：
   • 如果组件直接调用actions，那么组件就需要知道具体的 action 函数在哪里定义以及如何调用它。这会使组件代码与 Vuex 的业务逻辑紧密耦合。
   • 例如，想象一个组件是一个办公室职员，它只需要向经理（dispatch）提交一个任务请求，而不需要知道经理具体如何完成任务（action 的内部实现）。这样，即使任务的执行方式发生变化，职员（组件）的代码也不需要修改。
2. 提高可维护性：
   • 当业务逻辑发生变化时，只需要在 Vuex 的 store 中修改 action 的定义，而不需要在每个使用该 action 的组件中进行修改。
   • 比如，如果公司的业务流程发生变化，项目经理（action）的工作方式改变了，只需要在项目管理部门（Vuex store）进行调整，而各个办公室职员（组件）不受影响。

（二）统一的触发方式

1. 一致性：
   • dispatch提供了一种统一的方式来触发 actions，无论在哪个组件中调用，都使用相同的方法。
   • 这就像在公司里，无论哪个部门的员工需要请求项目经理完成任务，都通过向领导提交任务请求（dispatch）的方式，而不是直接去找项目经理。这样可以确保任务请求的方式一致，便于管理和维护。
2. 方便调试和追踪：
   • 由于所有的 action 触发都通过dispatch，可以更容易地在开发过程中进行调试和追踪。可以在dispatch的调用处设置断点，观察任务的触发和执行过程。
   • 就像在公司里，可以通过监控任务请求的提交点（dispatch）来了解任务的来源和执行情况，便于排查问题。

综上所述，使用dispatch来触发 actions 可以更好地实现组件与业务逻辑的解耦，提高代码的可维护性和一致性，同时也方便调试和追踪。