dispatch

在我们创建好Store实例后，我们应该怎么调用它的actions选项呢，那就用到了这个实例方法。

dispatch作用的是分发 action，也就是说我们在调用actions的方法时候需要以相应的 type 调用 store.dispatch 方法。

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

定义action

const store = createStore({
  state: {
    name: "也笑"
  },
  mutations: {
    changenName (state,name) {
      // 变更状态
      state.name=name
    }
  },
  actions: {
    changenName (context,name) {
      context.commit('changenName',name)
    }
  }
})

context上下文是个对象，你可以直接使用context，可以把里面的选项解构扩展开使用，如下：

actions: {
  changenName ({ commit },name) {
    commit('changenName')
  }
}

dispatch调用

Action 通过 store.dispatch 方法触发：

store.dispatch('changenName','slifree')

看着像多此一举，明明可以直接调用mutaion就行了，但是mutation 必须同步执行这个限制我们可不能忘记，那么一对比就知道了，action是可以用来处理异步操作的。

actions: {
  incrementAsync ({ commit },name) {
    setTimeout(() => {
      commit('changName',name)
    }, 1000)
  }
}

同mutation一样，如果载荷（即参数）是对象，我们可以对象形式分发：

store.dispatch({
  type: 'incrementAsync',
  name: 'slifree'
})

总结

我们需要注意的是：commit是用来提交mutation方法的，dispatch是用来提交action方法的，而action是要通过改变mutation而改变state的。

想了解更多文章，传送门已开启：回首Vue3目录篇！

回首Vue3之状态管理篇（七）

dispatch

定义action

dispatch调用

总结