参考文档：https://vuex.vuejs.org/zh/guide/

在官方网站中有关于actions返回结果的例子，但却没有mutations返回结果的例子，经过笔者的验证发现：

actions允许返回结果，但mutations不允许返回结果（即使写了return也不生效）。

首先在Vuex中补充返回结果的mutations（mutation3方法，修改文件路径为src\store\index.js），下面上代码：

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        param1: "state param"
    },
    getters: {
        param2: state => {
            return `new ${state.param1}`;
        },
        // 在getters中可以使用其他getters
        param3: (state, getters) => {
            return `another ${getters.param2}`;
        },
        // getter支持返回一个函数
        param4: state => index => {
            return state.paramArray[index];
        }
    },
    // mutations必须是同步函数（即函数内不能有异步行为）且不支持相互调用（如下面的mutation1不能调用mutation2）
    mutations: {
        mutation1: state => {
            // 在mutations的回调函数内可以修改state的值
            state.param1 += " add something";
        },
        // mutations支持传递参数（第二个参数）
        mutation2: (state, addString) => {
            state.param1 += addString;
        },
        /**
         * Vuex不允许mutations返回任何信息，但如果我们声明返回的是一个promise，
         * 虽然在调用处无法获取到promise对象，但这个promise仍可以执行
         */
        mutation3: () => {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    console.log("1000ms pass");
                    resolve();
                }, 1000);
            })
        }
    }
});

export default store;

然后在独立actions文件中补充返回结果的actions（action4和action5，修改文件路径为src\store\action.js），代码如下：

export default {
    // context对象中包含state、commit和dispatch，分别对应vuex中的state、执行mutations方法和执行actions方法
    action1: context => {
        setTimeout(() => {
            context.commit("mutation1");
        }, 1000);
    },
    /**
    * actions支持传递参数（第二个参数），如果获取commit或调用commit、dispatch频繁的话，
    * 可以通过解构赋值的方式直接拿到context对象里面的state、commit和dispatch
    */
    action2: ({ commit, state }, addString) => {
        setTimeout(() => {
            if (state.param1 === "state param") commit("mutation2", addString);
        }, 1000);
    },
    // actions支持相互调用
    action3: ({ dispatch }) => {
        dispatch("action1");
    },
    async action4(context) {
        return new Promise((res, rej) => {
            setTimeout(() => {
                console.log("enter setTimeout");
                res();
            }, 1000);
        })
    },
    // 与mutations不同的是，actions允许返回信息（以下为处理另一个actions返回的promise）
    async action5({ dispatch }) {
        let re = await dispatch("action4").then(() => {
            console.log("enter then");
            return "result";
        });
        console.log(`re is ${JSON.stringify(re)}`);
    }
};

在组件中引入有返回结果的mutations和actions（新增文件路径为src\components\componentJ.vue），代码如下：

<template>
    <div>
        <span>测试mutations和actions是否允许返回promise对象</span>
    </div>
</template>

<script>
import { mapMutations, mapActions } from "vuex";
export default {
    name: "component-j",
    methods: {
        ...mapMutations(["mutation3"]),
        ...mapActions(["action5"])
    },
    created() {
        let promise = this.mutation3();
        // 在控制台可以看到promise的打印结果为undefined，即mutations是不允许有return结果的（即使我们写了return也获取不到）
        console.log(`promise is ${promise}`);
        // promise.then(() => {
        //     console.log("next action complete");
        // });
        this.action5();
    }
};
</script>

<style scoped>
</style>

引用上面创建的组件查看效果（修改文件路径为src\main.js），代码如下：

import Vue from 'vue'
import store from './store'
import ComponentA from './components/ComponentA.vue'
import ComponentB from './components/ComponentB.vue'
import ComponentC from './components/ComponentC.vue'
import ComponentD from './components/ComponentD.vue'
import ComponentE from './components/ComponentE.vue'
import ComponentF from './components/ComponentF.vue'
import ComponentG from './components/ComponentG.vue'
import ComponentH from './components/ComponentH.vue'
import ComponentI from './components/ComponentI.vue'
import ComponentJ from './components/ComponentJ.vue'

new Vue({
    el: '#app',
    store,
    components: { ComponentA, ComponentB, ComponentC, ComponentD, ComponentE, ComponentF, ComponentG, ComponentH, ComponentI, ComponentJ },
    template: '<div><component-a></component-a><component-b></component-b><component-c></component-c><component-d></component-d><component-e></component-e><component-f></component-f><component-g></component-g><component-h></component-h><component-i></component-i><component-j></component-j></div>'
});

运行后在控制台可以看到mutation3返回了undefined（虽然return的Promise执行了），而action5则拿到了action4返回的Promise对象。