各位老铁，大家好！我是今天的主讲人，咱们今天来聊聊 Vuex 源码里那个神秘又强大的 dispatch 方法。别看它名字平平无奇，实则暗藏玄机，尤其是它处理异步操作和支持 Promise 返回的机制，绝对值得咱们好好扒一扒。
dispatch 方法：你的“任意门”
首先，咱们得明白 dispatch 在 Vuex 里扮演的角色。简单来说，dispatch 就是你的“任意门”，它允许你从组件里发起一个 Action，进而触发状态的变更。你可以把它想象成一个快递员，你告诉他要送什么包裹（Action 类型），送到哪里（mutation），他会帮你搞定一切。
源码初探：看看 dispatch 长啥样
咱们先来简单看看 dispatch 方法的源码（简化版，只保留核心逻辑）：
function dispatch (_type, _payload, _options) {
// 1. 规范化参数
const { type, payload, options } = unifyObjectStyle(_type, _payload, _options)
// 2. 获取对应的 action 函数
const entry = this._actions[type]
if (!entry) {
console.error(`[vuex] unknown action type: ${type}`)
return
}
// 3. 执行 action 函数
try {
this._actionSubscribers
.slice() // 克隆一份，避免在订阅函数中修改原始数组
.forEach(subscriber => subscriber({
type: type,
payload: payload
}, this.state))
return entry.length > 1
? Promise.all(entry.map(handler => handler(context, payload)))
: entry[0](context, payload)
} catch (e) {
console.error(`[vuex] error dispatching action ${type}`)
throw e
}
}代码不多，但信息量很大。咱们一步步来解读：
-
参数规范化：
unifyObjectStyleVuex 允许你以两种方式调用
dispatch：dispatch('myAction', payload)dispatch({ type: 'myAction', payload: payload })
unifyObjectStyle的作用就是把这两种方式统一成第二种，方便后续处理。这就像你去饭店点菜，不管你是直接说“来个宫保鸡丁”，还是拿着菜单指着“宫保鸡丁”，服务员最终都会给你下单“宫保鸡丁”。// 简化版 unifyObjectStyle function unifyObjectStyle (type, payload, options) { if (typeof type === 'string') { return { type, payload, options } } else if (typeof type === 'object' && type !== null && typeof type.type === 'string') { return { type: type.type, payload: type.payload, options: options || type.options } } else { throw new Error(`Invalid action type: ${type}`) } } -
查找 Action：
this._actionsVuex 在初始化的时候，会把你在
actions配置项里定义的所有 Action 函数都存储在一个叫做this._actions的对象里。这个对象就像一个电话簿，Action 的类型就是姓名，对应的函数就是电话号码。dispatch就是根据你提供的 Action 类型，在这个电话簿里查找对应的函数。如果找不到，就会报错，告诉你：“老铁，你拨的号码不存在！”
-
执行 Action：
entry.length > 1 ? ... : ...这部分是
dispatch的核心逻辑，也是处理异步操作的关键。咱们先来看看context是个什么东西：const context = { dispatch: dispatch.bind(this), // 绑定了当前的 store 实例，允许 action 再次 dispatch 其他 action commit: commit.bind(this), // 绑定了当前的 store 实例，允许 action 提交 mutation state: this.state, // 当前的 state getters: this.getters, // 当前的 getters rootState: this.state, // 根 state (用于模块化 store) rootGetters: this.getters // 根 getters (用于模块化 store) }这个
context对象包含了dispatch、commit、state和getters等属性，相当于给 Action 函数提供了一个工具箱，让它可以方便地修改状态、触发其他 Action 等操作。接下来，重点来了：
entry.length > 1: 这表示同一个 Action 类型可以对应多个处理函数 (handler)。这种情况在插件或者模块化 store 中比较常见。如果一个 Action 类型对应多个处理函数，dispatch会使用Promise.all并发执行这些函数。entry[0](context, payload): 如果一个 Action 类型只对应一个处理函数，dispatch会直接执行这个函数。
关键：Promise.all 的妙用
Promise.all允许你并发执行多个 Promise，并在所有 Promise 都 resolve 后，返回一个包含所有结果的 Promise。这保证了即使 Action 函数内部包含异步操作，dispatch也能正确处理，并在所有异步操作完成后才返回。举个例子：
const actions = { async fetchData1({ commit }) { const data = await fetch('/api/data1').then(res => res.json()); commit('setData1', data); return data; // 返回 Promise }, async fetchData2({ commit }) { const data = await fetch('/api/data2').then(res => res.json()); commit('setData2', data); return data; // 返回 Promise }, async fetchData({ dispatch }) { // 并发执行 fetchData1 和 fetchData2 const [data1, data2] = await Promise.all([ dispatch('fetchData1'), dispatch('fetchData2') ]); console.log('All data fetched:', data1, data2); return {data1, data2}; // 返回 Promise } };在这个例子中，
fetchDataAction 并发地dispatch了fetchData1和fetchData2两个 Action。由于fetchData1和fetchData2都是异步操作（使用了async/await），Promise.all会等待它们都完成，然后才执行console.log和返回结果。
Action Subscribers：幕后观察者
在执行 Action 之前，dispatch 还会通知所有 Action Subscribers。Action Subscribers 就像是埋伏在 Action 执行过程中的侦察兵，它们可以监听每一个 Action 的触发，并执行一些自定义的操作，比如记录日志、发送统计数据等。
this._actionSubscribers
.slice() // 克隆一份，避免在订阅函数中修改原始数组
.forEach(subscriber => subscriber({
type: type,
payload: payload
}, this.state))Promise 返回：异步操作的保证
dispatch 方法会返回一个 Promise，这允许你在组件中等待 Action 执行完成，并获取 Action 的返回值。这对于处理异步操作非常重要。
<template>
<button @click="handleClick">Fetch Data</button>
</template>
<script>
export default {
methods: {
async handleClick() {
try {
const result = await this.$store.dispatch('fetchData');
console.log('Data fetched successfully:', result);
} catch (error) {
console.error('Failed to fetch data:', error);
}
}
}
};
</script>在这个例子中，handleClick 方法使用 await 等待 dispatch('fetchData') 返回的 Promise resolve。如果 Action 执行成功，result 将包含 Action 的返回值；如果 Action 执行失败，catch 块会捕获错误。
表格总结：dispatch 方法的核心流程
| 步骤 | 描述 | 涉及的代码 |
|---|---|---|
| 1 | 参数规范化：将 dispatch 的参数统一成 { type: 'actionType', payload: 'payload' } 的格式。 |
unifyObjectStyle |
| 2 | 查找 Action：根据 Action 类型，从 this._actions 对象中查找对应的处理函数。 |
this._actions[type] |
| 3 | 执行 Action Subscribers：在执行 Action 之前，通知所有 Action Subscribers。 | this._actionSubscribers.forEach(subscriber => subscriber({ type: type, payload: payload }, this.state)) |
| 4 | 执行 Action：如果 Action 类型对应多个处理函数，使用 Promise.all 并发执行；如果只对应一个处理函数，直接执行。 |
entry.length > 1 ? Promise.all(entry.map(handler => handler(context, payload))) : entry[0](context, payload) |
| 5 | 返回 Promise：dispatch 方法返回一个 Promise，允许你在组件中等待 Action 执行完成，并获取 Action 的返回值。 |
return entry.length > 1 ? Promise.all(entry.map(handler => handler(context, payload))) : entry[0](context, payload) (返回 Promise) |
处理异步 Action 的几种常见姿势
-
使用
async/await这是最优雅的方式，代码简洁易懂。
const actions = { async myAction({ commit }, payload) { try { const data = await fetchData(payload); // 假设 fetchData 是一个返回 Promise 的函数 commit('myMutation', data); return data; // 返回 Promise } catch (error) { console.error('Error fetching data:', error); throw error; // 抛出错误，让组件可以捕获 } } }; -
使用 Promise 的
then/catch这种方式比较传统，但也很有效。
const actions = { myAction({ commit }, payload) { return fetchData(payload) // 假设 fetchData 是一个返回 Promise 的函数 .then(data => { commit('myMutation', data); return data; // 返回 Promise }) .catch(error => { console.error('Error fetching data:', error); throw error; // 抛出错误，让组件可以捕获 }); } }; -
不返回 Promise
如果你的 Action 不需要等待异步操作完成，或者你不需要在组件中获取 Action 的返回值，你可以不返回 Promise。但是，请注意，这种情况下，
dispatch方法仍然会返回一个 Promise，但这个 Promise 会立即 resolve，不会等待 Action 内部的异步操作完成。const actions = { myAction({ commit }, payload) { fetchData(payload) // 假设 fetchData 是一个返回 Promise 的函数 .then(data => { commit('myMutation', data); }) .catch(error => { console.error('Error fetching data:', error); }); // 没有返回 Promise } };
注意事项
- 错误处理： 在异步 Action 中，一定要进行错误处理，避免程序崩溃。可以使用
try/catch或者 Promise 的catch方法来捕获错误。 - Promise 链： 如果你的 Action 内部包含多个异步操作，可以使用 Promise 链来保证它们的执行顺序。
- 避免过度使用
Promise.all： 虽然Promise.all可以并发执行多个 Promise，提高效率，但是如果并发的 Promise 数量过多，可能会导致性能问题。需要根据实际情况进行权衡。 - 理解 Action Subscribers 的作用： Action Subscribers 可以用来监听 Action 的触发，并执行一些自定义的操作。但是，需要注意，Action Subscribers 会影响 Action 的执行性能，不应该过度使用。
总结
dispatch 方法是 Vuex 中一个非常重要的组成部分，它负责触发 Action，处理异步操作，并支持 Promise 返回。理解 dispatch 方法的实现原理，可以帮助你更好地使用 Vuex，编写更高效、更健壮的代码。
希望今天的讲座能帮助大家更深入地理解 Vuex 的 dispatch 方法。如果大家还有什么疑问，欢迎随时提问！下次再见！