突变和动作有什么区别答案

【问题标题】：what is the difference between mutation and action突变和动作有什么区别
【发布时间】：2019-10-26 11:01:31
【问题描述】：

在 Vuex 中，“actions”和“mutations”同时存在的逻辑是什么？

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

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

我试过了......

import Vuex from 'vuex'

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

错误代码 502

【问题讨论】：

查看the documentation for actions。它甚至以“动作类似于突变，区别是......”开头
Error code 502 是 “Bad Gateway” 的服务器端错误。它不太可能与您的 JS 代码有任何关系

标签： javascript vue.js vuex

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

Action 不能直接更改您的状态，因此它们需要对您的变更提交操作。
像函数一样思考动作。
Mutations 负责修改你在 Vuex 存储中的状态。要调用突变，您必须提交调用突变的操作。

例子：

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

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

您可以在Vuex documentation 上查看有关突变和操作的更多信息

【讨论】：

【解决方案3】：

Mutations Must Be Synchronous 所以无法在异步操作中改变状态。

为了解决这个问题，vuex 提供了actions，通过提交同步突变

来改变状态

如果你有同步操作，只需使用 mutation，否则 action + mutation

【讨论】：