官方解释

dispatch(type: string, payload?: any, options?: Object): Promise<any>

dispatch(action: Object, options?: Object): Promise<any>

分发 action。options 里可以有 root: true，它允许在命名空间模块里分发根的 action。返回一个解析所有被触发的 action 处理器的 Promise

理解

this.$store.dispatch 分发 actions-> 调用 mutations->改变 states

思考

• Q1：为什么不直接分发 mutation

mutation 有必须同步执行的限制，而 Action 不受约束，可以在 action 内部执行异步操作

• Q2：Action 通常是异步的，如何知道 action 什么时候结束？如何才能组合多个 action，处理复杂的异步流程

store.dispatch 可以处理被触发的 action 的处理函数返回 Promise，并且 store.dispatch 仍旧返回 Promise

• 引用官网举例：

// 假设 getData() 和 getOtherData() 返回的是 Promise
actions: {
  async actionA ({ commit }) {
    commit('gotData', await getData())
  },
  async actionB ({ dispatch, commit }) {
    await dispatch('actionA') // 等待 actionA 完成
    commit('gotOtherData', await getOtherData())
  }
}

一个 store.dispatch 在不同模块中可以触发多个 action 函数。在这种情况下，只有当所有触发函数完成后，返回的 Promise 才会执行

Vuex 中 dispatch()和 commit()的异同

• 相同点

都可以修改 state，并且也会触发视图的更新

• 不同点

commit 调用的是 vuex 中 mutation 里的方法，存在同步限制；而 dispatch 调用的数 vuex 中 action 里的方法，action 中可以调用 mutation 中的函数，也可执行异步操作

commit：同步操作

// 存储
this.$store.commit('chgval',name);
// 取值
this.$store.state.chgval;

dispatch：异步操作

// 存储
this.$store.dispatch('listdata',name);
// 取值
this.$store.getters.listdata;