在 Vuex 中,dispatchcommit 都是用于触发 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')
    }
  }
}
Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐