剖析 Vuex 源码中 `dispatch` 方法的实现，它如何处理 `actions` 的异步性，并支持 Promise 返回。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众，欢迎来到今天的 Vuex 源码剖析讲座！今天我们要扒的是 Vuex 中一个非常重要的角色——dispatch 方法。它就像一个勤劳的快递员，负责把我们的指令（actions）送到仓库，并处理各种异步情况。这位快递员是怎么工作的呢？让我们一起深入源码，看看它到底藏了多少秘密。

一、dispatch 的基本职责：发出指令

首先，我们要明确 dispatch 的作用：它用于触发 actions 中的方法。想象一下，你有一个 Vuex 的 store，里面定义了一些 actions，比如 increment（增加计数）和 fetchData（获取数据）。你想让 increment 执行，就得用 dispatch('increment')。

// store.js
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment(context) {
      context.commit('increment')
    }
  }
})

// 组件中使用
store.dispatch('increment')

上面这段代码，dispatch('increment') 就相当于告诉 store：“嘿，执行一下 increment 这个 action！”

二、dispatch 源码初探：核心代码

让我们看看 dispatch 的核心代码（简化版）：

function dispatch(_type, _payload) {
  const { type, payload } = unifyObjectStyle(_type, _payload) // 统一参数格式

  const action = { type, payload }
  const entry = this._actions[type] // 查找 action

  if (!entry) {
    // action 不存在，报错
    console.error(`[vuex] unknown action type: ${type}`)
    return
  }

  try {
    this._actionSubscribers
      .slice() // 复制一份，防止在订阅函数中修改
      .forEach(sub => sub(action, this.state)) // 触发 action 订阅者

    return entry.length > 1 // 是否有多个 handler
      ? Promise.all(entry.map(handler => handler(context, payload))) // 并行执行多个 handler，返回 Promise
      : entry[0](context, payload) // 执行单个 handler
  } catch (e) {
    this._committing = false
    console.error(e)
  }
}

这段代码做了几件事：

统一参数格式：unifyObjectStyle

dispatch 可以接收两种参数形式：
- 字符串类型：dispatch('increment')
- 对象类型：dispatch({ type: 'increment' })
unifyObjectStyle 函数负责把这两种形式统一成对象形式：
```
function unifyObjectStyle(type, payload) {
  if (typeof type === 'string' && typeof payload === 'undefined') {
    return { type: type }
  } else if (typeof type === 'object' && type.type) {
    return type
  } else {
    console.error(`[vuex] invalid dispatch arguments: ${type}`)
  }
}
```
这个函数就像一个“万能转换器”，保证 dispatch 拿到的都是标准格式。
查找 action：this._actions[type]

this._actions 是一个对象，存储了所有注册的 actions。 dispatch 根据传入的 type (action 的名字) 在 _actions 中查找对应的 action 函数。如果找不到，就报错。这就像查字典，找不到对应的词就说明你拼错了。
触发 action 订阅者：this._actionSubscribers

Vuex 允许你订阅 action 的执行。通过 store.subscribeAction 可以注册 action 订阅者。这些订阅者会在 action 执行前后被调用，可以用来做一些日志记录、性能监控等事情。 this._actionSubscribers 存储了所有订阅者，dispatch 会遍历它们，并执行它们。这就像一个“广播系统”，通知所有订阅者：“这个 action 要执行了！”
执行 action 函数：entry[0](context, payload) 或 Promise.all(entry.map(...))

entry 是一个数组，存储了所有与 type 对应的 action 函数。为什么是数组呢？因为 Vuex 允许你注册多个同名的 action。如果只有一个 action 函数，就直接执行它。如果有多个，就并行执行它们，并返回一个 Promise。

context 是一个对象，包含了 commit、dispatch、state、getters 等属性。 action 函数可以通过 context 来访问 store 的状态、提交 mutations，以及 dispatch 其他 actions。这就像一个“工具箱”，action 函数可以用它来完成各种任务。

三、异步处理：Promise 的妙用

Vuex 的 actions 通常用于处理异步操作，比如发送 HTTP 请求。为了更好地处理异步操作，dispatch 支持 Promise 返回。

如果 action 函数返回一个 Promise，dispatch 会等待 Promise 完成，然后再继续执行后续的代码。

// actions.js
const actions = {
  fetchData(context) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        const data = { name: 'Vuex', version: '4.x' }
        context.commit('setData', data)
        resolve(data)
      }, 1000)
    })
  }
}

// 组件中使用
store.dispatch('fetchData').then(data => {
  console.log('数据获取成功：', data)
})

在上面的例子中，fetchData action 返回一个 Promise。 dispatch('fetchData') 会返回一个 Promise，你可以使用 .then() 来处理 Promise 完成后的逻辑。这就像一个“承诺”，dispatch 承诺在 action 执行完成后通知你。

四、深入源码：异步处理的细节

让我们再次审视 dispatch 的源码，看看它是如何处理 Promise 的：

try {
  this._actionSubscribers
    .slice()
    .forEach(sub => sub(action, this.state))

  return entry.length > 1
    ? Promise.all(entry.map(handler => handler(context, payload)))
    : entry[0](context, payload)
} catch (e) {
  this._committing = false
  console.error(e)
}

关键在于 Promise.all() 和直接返回 entry[0](context, payload)。

单个 action 函数： 如果只有一个 action 函数，dispatch 会直接执行它，并返回它的返回值。如果 action 函数返回一个 Promise，dispatch 也会返回这个 Promise。
多个 action 函数： 如果有多个 action 函数，dispatch 会使用 Promise.all() 来并行执行它们。 Promise.all() 会等待所有 Promise 完成，然后返回一个新的 Promise。这个新的 Promise 的 resolve 值是一个数组，包含了所有 Promise 的 resolve 值。

五、Action 订阅者：监控行动

前面提到过 action 订阅者。它们可以用来监控 action 的执行，做一些有用的事情，比如：

日志记录： 记录 action 的执行时间、参数、返回值等信息。
性能监控： 监控 action 的执行性能，找出瓶颈。
权限控制： 在 action 执行前，检查用户是否有权限执行该 action。

// 注册 action 订阅者
const unsubscribe = store.subscribeAction((action, state) => {
  console.log(`action ${action.type} triggered with payload:`, action.payload)
  console.log('current state:', state)
})

// 取消订阅
unsubscribe()

subscribeAction 接收一个函数作为参数，这个函数会在 action 执行前后被调用。这个函数接收两个参数：

action：一个对象，包含了 action 的类型和 payload。
state：当前的 state。

subscribeAction 返回一个函数，调用这个函数可以取消订阅。这就像一个“开关”，可以随时打开或关闭监控。

六、注意事项：谨防踩坑

在使用 dispatch 时，需要注意以下几点：

不要在 mutations 中 dispatch actions： mutations 必须是同步的，而 actions 可以是异步的。如果在 mutations 中 dispatch actions，可能会导致状态不一致。
小心处理 Promise 错误： 如果 action 函数返回的 Promise 发生错误，你需要使用 .catch() 来捕获错误，并进行处理。否则，错误可能会被吞噬，导致程序出现异常。
避免过度使用 action 订阅者： action 订阅者会增加程序的复杂性，并可能影响性能。只有在必要的时候才使用它们。

七、总结：dispatch 的职责与智慧

dispatch 方法是 Vuex 中一个非常重要的角色。它负责触发 actions，处理异步操作，并支持 action 订阅者。它就像一个“调度中心”，协调着 store 中的各种活动。

让我们用一个表格来总结 dispatch 的主要职责：

希望今天的讲座能帮助大家更好地理解 Vuex 中 dispatch 方法的实现。记住，理解源码才能更好地使用框架，写出更健壮、更高效的代码。

谢谢大家！咱们下期再见！

发表回复 取消回复

发表回复取消回复