Vuex 源码分析（六）：深入浅出 Dispatch

2023-11-10 08:32:06

Vuex 中的 dispatch 方法

在 Vuex 中，dispatch 方法是用于触发 action 的关键手段。action 是 Vuex 中的一种特殊函数，它可以用于执行异步操作、提交 mutation、触发其他 action 等等。在组件中，我们通常通过调用 dispatch 方法来触发所需的 action。

dispatch 方法的实现

为了更好地理解 dispatch 方法的实现，我们需要深入 Vuex 的源码。

export function dispatch (_this, type, payload, options) {
  const result = _this._wrappedGetters[type]
    ? _this._wrappedGetters[type](payload, _this.state)
    : _this._actions[type](payload)

  if (!isPromise(result)) {
    return result
  }

  return result.catch(error => {
    console.error(error)
  })
}

从源码中可以看出，dispatch 方法首先会根据 action 的 type 来查找对应的 action 函数。如果找到，则会执行该 action 函数，并将 payload 作为参数传递给该函数。如果找不到，则会抛出错误。

如果 action 函数返回一个 Promise 对象，则 dispatch 方法会等待该 Promise 对象解析，并将解析结果返回。如果 action 函数没有返回 Promise 对象，则 dispatch 方法会直接返回 action 函数的执行结果。

dispatch 方法的作用

dispatch 方法在 Vuex 中起着重要的作用，它可以用于触发各种操作，包括：

执行异步操作：action 可以执行异步操作，例如发起网络请求。
提交 mutation：action 可以提交 mutation，从而修改 store 中的状态。
触发其他 action：action 可以触发其他 action，从而形成一个 action 链。

dispatch 方法与其他方法的关系

dispatch 方法与 Vuex 中的 commit 方法和 getters 方法有着密切的关系。

dispatch 方法用于触发 action，而 commit 方法用于提交 mutation。
dispatch 方法可以触发 action，而 action 可以提交 mutation。
dispatch 方法可以触发 action，而 action 可以触发其他 action。
getters 方法用于获取 store 中的状态，而 dispatch 方法和 commit 方法用于修改 store 中的状态。

示例

以下是一个使用 dispatch 方法的示例：

// 在组件中调用 dispatch 方法触发 action
this.$store.dispatch('fetchPosts')

// 定义一个 action
export const fetchPosts = ({ commit }) => {
  // 触发异步操作
  fetch('https://example.com/posts')
    .then(response => response.json())
    .then(posts => {
      // 提交 mutation
      commit('setPosts', posts)
    })
    .catch(error => {
      // 处理错误
      console.error(error)
    })
}