这也让我感到困惑，所以我做了一个简单的演示。

component.vue

<template>
    <div id="app">
        <h6>Logging with Action vs Mutation</h6>
        <p>{{count}}</p>
        <p>
            <button @click="mutateCountWithAsyncDelay()">Mutate Count directly with delay</button>
        </p>
        <p>
            <button @click="updateCountViaAsyncAction()">Update Count via action, but with delay</button>
        </p>
        <p>Note that when the mutation handles the asynchronous action, the "log" in console is broken.</p>
        <p>When mutations are separated to only update data while the action handles the asynchronous business
            logic, the log works the log works</p>
    </div>
</template>

<script>

        export default {
                name: 'app',

                methods: {

                        //WRONG
                        mutateCountWithAsyncDelay(){
                                this.$store.commit('mutateCountWithAsyncDelay');
                        },

                        //RIGHT
                        updateCountViaAsyncAction(){
                                this.$store.dispatch('updateCountAsync')
                        }
                },

                computed: {
                        count: function(){
                                return this.$store.state.count;
                        },
                }

        }
</script>

store.js

import 'es6-promise/auto'
import Vuex from 'vuex'
import Vue from 'vue';

Vue.use(Vuex);

const myStore = new Vuex.Store({
    state: {
        count: 0,
    },
    mutations: {

        //The WRONG way
        mutateCountWithAsyncDelay (state) {
            var log1;
            var log2;

            //Capture Before Value
            log1 = state.count;

            //Simulate delay from a fetch or something
            setTimeout(() => {
                state.count++
            }, 1000);

            //Capture After Value
            log2 = state.count;

            //Async in mutation screws up the log
            console.log(`Starting Count: ${log1}`); //NRHG
            console.log(`Ending Count: ${log2}`); //NRHG
        },

        //The RIGHT way
        mutateCount (state) {
            var log1;
            var log2;

            //Capture Before Value
            log1 = state.count;

            //Mutation does nothing but update data
            state.count++;

            //Capture After Value
            log2 = state.count;

            //Changes logged correctly
            console.log(`Starting Count: ${log1}`); //NRHG
            console.log(`Ending Count: ${log2}`); //NRHG
        }
    },

    actions: {

        //This action performs its async work then commits the RIGHT mutation
        updateCountAsync(context){
            setTimeout(() => {
                context.commit('mutateCount');
            }, 1000);
        }
    },
});

export default myStore;

经过研究，我得出的结论是，突变是一种只关注于更改数据以更好地分离关注点和改进更新数据前后的日志记录的约定。而动作是一个抽象层，它处理更高层次的逻辑，然后适当地调用突变

突变是同步的，而操作可以是异步的。

换句话说:如果您的操作是同步的，则不需要操作，否则就实现它们。

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

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

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

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

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

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

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

动作和突变之间的主要区别:

在突变中，你可以改变状态，但不能改变它的行为。 您可以在动作内部运行异步代码，但不能在突变中运行。 在动作内部，你可以访问getter，状态，突变(提交它们)，动作(分派它们)等等，在突变中你只能访问状态。

问题1:Vuejs的开发者为什么决定这样做?

答:

当您的应用程序变得很大，并且有多个开发人员在这个项目上工作时，您会发现“状态管理”(特别是“全局状态”)变得越来越复杂。 Vuex方式(就像react.js中的Redux一样)提供了一种新的机制来管理状态、保持状态和“保存和跟踪”(这意味着每个修改状态的操作都可以被调试工具vue-devtools跟踪)

问题2:“action”和“mutation”有什么区别?

让我们先看看官方的解释:

Mutations: Vuex mutations are essentially events: each mutation has a name and a handler. 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) }

以下是我对上述问题的解释:

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

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