vuex 中dispatch 和 commit

在 Vuex 中，dispatch 和 commit 都是用于触发 Vuex 中的 actions 和 mutations 的方法，但是它们的作用和用法略有不同。

dispatch 方法用于触发 actions，它接收一个 action 的 type 和 payload 作为参数。例如：

store.dispatch('incrementAsync', {
  amount: 10
})

上面的代码中，incrementAsync 是一个 actions 的 type，{ amount: 10 } 是一个 payload，用于传递参数给 actions。

在 actions 中，可以使用 context.commit 方法来触发 mutations，例如：

actions: {
  incrementAsync({ commit }, payload) {
    setTimeout(() => {
      commit('increment', payload.amount)
    }, 1000)
  }
}

commit 方法用于触发 mutations，它接收一个 mutation 的 type 和 payload 作为参数。例如：

store.commit('increment', {
  amount: 10
})

上面的代码中，increment 是一个 mutations 的 type，{ amount: 10 } 是一个 payload，用于传递参数给 mutations。

在 mutations 中，可以直接修改 state 的状态，例如：

mutations: {
  increment(state, payload) {
    state.count += payload.amount
  }
}

需要注意的是，在 Vuex 中，actions 中不能直接修改 state 的状态，只能通过触发 mutations 来修改 state 的状态。因此，在 actions 中通常会执行一些异步操作，然后通过 context.commit 触发 mutations 来修改 state 的状态。

另外，需要使用 $store.dispatch 和 $store.commit 方法来在组件中触发 actions 和 mutations，例如：

this.$store.dispatch('incrementAsync', {
  amount: 10
})

this.$store.commit('increment', {
  amount: 10
})

需要注意的是，在组件中使用 $store.dispatch 和 $store.commit 方法时，需要先在组件中注入 $store，例如：

import { mapState } from 'vuex'

export default {
  computed: mapState(['count']),
  methods: {
    increment() {
      this.$store.commit('increment')
    }
  }
}