Vuex 动作与突变

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

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

“动作”和“突变”之间有什么区别，它们如何协同工作，而且我很好奇为什么 Vuex 开发人员决定这样做？

问题1：为什么 Vuejs 开发人员决定这样做？

Answer:

1. 当你的应用程序变得很大，并且有多个开发人员在处理这个项目时，你会发现“状态管理”（尤其是“全局状态”）变得越来越复杂。
2. Vuex 方式（就像React.js 中的 Redux https://github.com/reactjs/redux）提供了一种新的机制来管理状态、保持状态和“保存并可跟踪”（这意味着修改状态的每个操作都可以通过调试工具：vue-devtools https://github.com/vuejs/vue-devtools)

问题2：“行动”和“突变”有什么区别？

我们先看官方的解释：

突变：

Vuex 突变本质上是事件：每个突变都有一个名称和一个 处理程序。

import Vuex from 'vuex'

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

动作：动作只是调度突变的函数。

// the simplest action
function increment ({commit}) {
  commit('INCREMENT')
}

// a action with additional arguments
// with ES2015 argument destructuring
function incrementBy ({ dispatch }, amount) {
  dispatch('INCREMENT', amount)
}

以下是我对上述内容的解释：

• A mutation is the only way修改状态
• The mutation不关心业务逻辑，它只关心“状态”
• An action是业务逻辑
• The action can commit一次超过1个突变，它只是实现业务逻辑，它不关心数据更改（由突变管理）