Vuex 动作与突变

Question

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

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

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

原文由 Kobi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

回答：

1. 当你的应用程序变大，当有多个开发者在做这个项目时，你会发现“状态管理”（尤其是“全局状态”）变得越来越复杂。
2. Vuex 方式（就像 react.js 中的 Redux 一样）提供了一种新的机制来管理状态、保持状态和“保存和可跟踪”（这意味着每个修改状态的操作都可以通过 调试工具进行跟踪：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)
}

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

• 突变 是修改状态的 唯一方法
• 突变 不关心业务逻辑，它只关心“状态”
• 动作 是业务逻辑
• 该 动作一次 可以 提交 多个突变，它只是实现业务逻辑，它不关心数据更改（由突变管理）

原文由 Kaicui 发布，翻译遵循 CC BY-SA 4.0 许可协议