Question

在Vuex中，同时具有“动作”和“变异”的逻辑是什么？

我了解无法修改状态（看起来很聪明）的组件的逻辑，但是同时具有动作和突变似乎就像您在编写一个函数来触发另一个功能，然后改变状态一样。

“动作”和“变异”之间有什么区别，它们如何协同工作，更进一步，我很好奇Vuex开发人员为何决定采用这种方式？

我尝试了.......

import Vuex from 'vuex'

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    INCREMENT (state) {
      // mutate state
      state.count++
    }
  }
})

错误代码502

Answer 1

组件不应直接更改状态。
因此，您必须从组件触发ACTION。
实际上，您将拥有API调用之类的业务逻辑，它将在状态更新发生时触发对MUTATION的调用。

Answer 2

动作和突变的行为相似，因此区别在于：

动作无法直接更改您的状态，因此它们需要对您的突变进行操作。
考虑诸如功能之类的动作。
变异负责修改您在Vuex商店中的状态。要调用突变，您必须执行调用该突变的操作。

示例：

 actions: {
    MODIFY({dispatch, commit, getters, rootGetters}, obj) {
        //Do something
        commit('mymutation', obj)
    }
}

mutations: {
    mymutation(state, obj) {
        store.state.count = 1
    }
}

您可以在Vuex documentation

上查看有关突变和动作的更多信息

Answer 3

Mutations Must Be Synchronous，因此无法在异步操作中更改状态。

为解决此问题，vuex提供了动作，可通过提交同步突变

来更改状态

如果您具有同步操作，只需使用变异，否则使用动作 + 变异

突变和作用有什么区别

3 个答案: