详解vuex中的this.$store.dispatch方法

在Vuex中，this.$store.dispatch方法用于分发（dispatch）一个action，从而触发store中的mutation。该方法接收两个参数：action的名称和可选的payload（载荷）。

下面是一个示例：

// 在组件中分发一个action
this.$store.dispatch('increment', 10)

在这个示例中，我们分发了一个名为increment的action，并传递了一个值为10的payload。在store中，我们可以通过以下方式定义increment action：

// store.js

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state, payload) {
      state.count += payload
    }
  },
  actions: {
    increment(context, payload) {
      context.commit('increment', payload)
    }
  }
})

在这个示例中，我们定义了一个名为increment的action，它将调用commit方法来分发名为increment的mutation。action可以接收一个context对象作为第一个参数，该对象包含与store实例相同的属性和方法，例如commit方法和state属性。

总之，this.$store.dispatch方法允许我们在组件中触发一个action，从而更新store中的state状态。这是Vuex中常用的一种模式，它使得组件可以与store进行交互，并对store中的数据进行操作。

dispatch 和 commit 的用法和区别

在Vuex中，dispatch和commit都是用来触发mutation的方法，它们的主要区别在于它们被调用的上下文不同。

1. dispatch方法
   dispatch方法可以在组件中调用，它用来分发一个action，从而触发一个或多个mutation的执行。dispatch方法接收一个对象作为参数，该对象包含action的名称和可选的payload（载荷），例如：

// 在组件中分发一个action
this.$store.dispatch('increment', 10)

在这个示例中，我们分发了一个名为increment的action，并传递了一个值为10的payload。在store中，我们可以通过以下方式定义increment action：

// store.js

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state, payload) {
      state.count += payload
    }
  },
  actions: {
    increment(context, payload) {
      context.commit('increment', payload)
    }
  }
})

在这个示例中，我们定义了一个名为increment的action，它将调用commit方法来分发名为increment的mutation。action可以接收一个context对象作为第一个参数，该对象包含与store实例相同的属性和方法，例如commit方法和state属性。

2. commit方法
   commit方法可以在store中调用，它用来直接触发一个mutation的执行。commit方法接收一个对象作为参数，该对象包含mutation的名称和可选的payload（载荷），例如：

// 在store中直接提交一个mutation
store.commit('increment', 10)

在这个示例中，我们提交了一个名为increment的mutation，并传递了一个值为10的payload。在store中，我们可以通过以下方式定义increment mutation：

// store.js

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state, payload) {
      state.count += payload
    }
  },
})

在这个示例中，我们定义了一个名为increment的mutation，它将直接更新state中的count属性。

总之，dispatch方法用于在组件中分发action，并间接触发mutation的执行，而commit方法用于在store中直接提交mutation并触发其执行。如果要在组件中修改state，应该使用dispatch方法，如果要在store中修改state，应该使用commit方法。