vue.js - Vuex Action 与突变

Question

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

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

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

Answer 1

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

回答:

1. 当您的应用程序变大，并且有多个开发人员从事此项目时，您会发现“状态管理”(尤其是“全局状态”)变得越来越复杂。
2. Vuex 方式(就像 Redux in react.js )提供了一种新的机制来管理状态、保持状态和“保存并可跟踪”(这意味着每个修改状态的 Action 都可以被 debug tool:vue-devtools 跟踪)

问题2:“行动”和“变异”有什么区别？

先看官方解释:

Mutations:

Vuex mutations are essentially events: each mutation has a name and ahandler.

import Vuex from 'vuex'

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

Actions: Actions are just functions that dispatch mutations.

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

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

以上是我的解释:

• 突变是修改状态的唯一方法
• 突变不关心业务逻辑，它只关心“状态”
• action 是业务逻辑
• action 一次可以commit 1 个以上的突变，它只是实现业务逻辑，它不关心数据变化(由突变管理)