我认为TLDR的答案是，突变意味着同步/事务性的。因此，如果您需要运行Ajax调用，或执行任何其他异步代码，则需要在Action中执行该操作，然后提交一个突变，以设置新状态。

基因突变:

Can update the state. (Having the Authorization to change the state).

行动:

Actions are used to tell "which mutation should be triggered"

用Redux的方式

突变是减速器 行动就是行动

为什么都是??

当应用程序增长时，代码和行数将会增加，这时你必须在Actions中处理逻辑，而不是在突变中，因为突变是改变状态的唯一权威，它应该尽可能干净。

免责声明-我只是刚刚开始使用vuejs，所以这只是我推断的设计意图。

时间机器调试使用状态的快照，并显示动作和变化的时间轴。理论上，我们可以在记录状态设置器和获取器的同时进行操作，以同步地描述突变。但之后:

We would have impure inputs (async results) which caused the setters and getters. This would be hard to follow logically and different async setters and getters may surprisingly interact. That can still happen with mutations transactions but then we can say the transaction needs to be improved as opposed to it being a race condition in the actions. Anonymous mutations inside an action could more easily resurface these kinds of bugs because async programming is fragile and difficult. The transaction log would be hard to read because there would be no name for the state changes. It would be much more code-like and less English, missing the logical groupings of mutations. It might be trickier and less performant to instrument recording any mutation on a data object, as opposed to now where there are synchronously defined diff points - before and after mutation function call. I'm not sure how big of a problem that is.

将下面的事务日志与命名的突变进行比较。

Action: FetchNewsStories
Mutation: SetFetchingNewsStories
Action: FetchNewsStories [continuation]
Mutation: DoneFetchingNewsStories([...])

使用没有命名突变的事务日志:

Action: FetchNewsStories
Mutation: state.isFetching = true;
Action: FetchNewsStories [continuation]
Mutation: state.isFetching = false;
Mutation: state.listOfStories = [...]

我希望您能从这个例子中推断出动作中的异步和匿名突变可能增加的复杂性。

https://vuex.vuejs.org/en/mutations.html

Now imagine we are debugging the app and looking at the devtool's mutation logs. For every mutation logged, the devtool will need to capture a "before" and "after" snapshots of the state. However, the asynchronous callback inside the example mutation above makes that impossible: the callback is not called yet when the mutation is committed, and there's no way for the devtool to know when the callback will actually be called - any state mutation performed in the callback is essentially un-trackable!

这似乎没有必要有一个额外的操作层来调用突变，例如:

const actions = {
  logout: ({ commit }) => {
    commit("setToken", null);
  }
};

const mutations = {
  setToken: (state, token) => {
    state.token = token;
  }
};

因此，如果调用actions调用注销，为什么不调用突变本身呢?

动作的整个思想是从一个动作内部调用多个突变，或者发出Ajax请求或任何你能想到的异步逻辑。

我们最终可能会有发出多个网络请求的动作，并最终调用许多不同的突变。

因此，我们尝试将尽可能多的复杂性从我们的Vuex.Store()中添加到我们的动作中，这使得我们的突变、状态和getter更干净、更直接，并与使Vue和React等库流行的模块化保持一致。

1.从文档:

动作类似于突变，区别在于:

操作不会导致状态突变，而是导致突变。 动作可以包含任意异步操作。

action可以包含异步操作，但是突变不能。

2.我们调用突变，就能直接改变状态。我们也可以这样改变状态:

actions: {
  increment (store) {
    // do whatever ... then change the state
    store.commit('MUTATION_NAME')
  }
}

action是为处理更多其他事情而设计的，我们可以在那里做很多事情(我们可以使用异步操作)，然后通过调度突变来改变状态。

我已经专业地使用Vuex大约3年了，以下是我认为我已经弄清楚的动作和突变之间的本质区别，如何从良好地使用它们中受益，以及如果使用不好，如何使您的生活更加困难。

The main goal of Vuex is to offer a new pattern to control the behaviour of your application: Reactivity. The idea is to offload the orchestration of the state of your application to a specialized object: a store. It conveniently supplies methods to connect your components directly to your store data to be used at their own convenience. This allows your components to focus on their job: defining a template, style, and basic component behaviour to present to your user. Meanwhile, the store handles the heavy data load.

That is not the only advantage of this pattern though. The fact that stores are a single source of data for the entirety of your application offers a great potential for re-usability of this data across many components. This isn't the first pattern that attempts to address this issue of cross-component communication, but where it shines is that it forces you to implement a very safe behaviour in your application by basically forbidding your components to modify the state of this shared data, and force it instead to use "public endpoints" to ask for change.

基本思想是这样的:

The store has an internal state, which should never be directly accessed by components (mapState is effectively banned) The store has mutations, which are synchronous modifications to the internal state. A mutation's only job is to modify the state. They should only be called from an action. They should be named to describe things that happened to the state (ORDER_CANCELED, ORDER_CREATED). Keep them short and sweet. You can step through them by using the Vue Devtools browser extension (it's great for debugging too!) The store also has actions, which should be async or return a promise. They are the actions that your components will call when they want to modify the state of the application. They should be named with business oriented actions (verbs, i.e. cancelOrder, createOrder). This is where you validate and send your requests. Each action may call different commits at different steps if it is required to change the state. Finally, the store has getters, which are what you use to expose your state to your components. Expect them to be heavily used across many components as your application expands. Vuex caches getters heavily to avoid useless computation cycles (as long as you don't add parameters to your getter - try not to use parameters) so don't hesitate to use them extensively. Just make sure you give names that describe as closely as possible what state the application currently is in.

话虽如此，当我们开始以这种方式设计应用程序时，魔法就开始了。例如:

We have a component that offers a list of orders to the user with the possibility to delete those orders The component has mapped a store getter (deletableOrders), which is an array of objects with ids The component has a button on each row of orders, and its click is mapped to a store action (deleteOrder) which passes the order object to it (which, we will remember, comes from the store's list itself) The store deleteOrder action does the following: it validates the deletion it stores the order to delete temporarily it commits the ORDER_DELETED mutation with the order it sends the API call to actually delete the order (yes, AFTER modifying the state!) it waits for the call to end (the state is already updated) and on failure, we call the ORDER_DELETE_FAILED mutation with the order we kept earlier. The ORDER_DELETED mutation will simply remove the given order from the list of deletable orders (which will update the getter) The ORDER_DELETE_FAILED mutation simply puts it back, and modifies the state to notify of the error (another component, error-notification, would be tracking that state to know when to display itself)

最后，我们的用户体验被认为是“反应性的”。从用户的角度来看，该项目已被立即删除。大多数时候，我们希望端点正常工作，所以这很完美。当它失败时，我们仍然可以控制应用程序的反应，因为我们已经成功地将前端应用程序的状态与实际数据分离。

请注意，你并不总是需要商店。如果你发现你正在写这样的存储:

export default {
  state: {
    orders: []
  },
  mutations: {
    ADD_ORDER (state, order) {
       state.orders.push(order)
    },
    DELETE_ORDER (state, orderToDelete) {
       state.orders = state.orders.filter(order => order.id !== orderToDelete.id)
    }
  },
  actions: {
    addOrder ({commit}, order) {
      commit('ADD_ORDER', order)
    },
    deleteOrder ({commit}, order) {
      commit('DELETE_ORDER', order)
    }
  },
  getters: {
    orders: state => state.orders
  }
}

在我看来，您只是将存储用作数据存储，并且可能错过了它的反应性方面，因为没有让它也控制应用程序响应的变量。基本上，您可以也应该将组件中编写的一些代码卸载到存储中。