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

mapMutations的定义可以对标mapState和mapGetters参考理解，这里就不赘述了，下面直接上用法示例代码。首先在Vuex中补充mutations的其他用法（mutation2方法，修改文件路径为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;
        }
    }
});

export default store;

在组件中通过mapMutations引入新增的mutations并在页面上提供调用入口（修改文件路径为src\components\componentF.vue），代码如下：

<template>
    <div>
        <span>mutations用法</span>
        <br />
        <span>state in vuex：{{param1}}</span>
        <!-- <br />
        <button @click="commitMutation1">mutations</button>-->
        <br />
        <button @click="mutation1">mapMutations</button>
        <br />
        <button @click="mutation2(' add somebody')">mapMutations</button>
    </div>
</template>

<script>
// 引入mapMutations
import { mapState, mapMutations } from "vuex";
export default {
    name: "component-f",
    computed: {
        ...mapState(["param1"])
    },
    methods: {
        /**
        * 通过mapMutations引入mutation1和mutation2相当于在methods中定义了名称为mutation1和mutation2
        * 的2个方法，所以就不能在methods中重复定义名称为mutation1和mutation的方法了
        */
        ...mapMutations(["mutation1", "mutation2"]),
        commitMutation1() {
            // 通过this.$store.commit("mutations方法名")的方式调用mutations
            this.$store.commit("mutation1");
            // 上下两种调用方式是等价的，但显然下面的写法简洁多了
            // this.mutation1();
        }
    }
};
</script>

<style scoped>
</style>

运行后点击第一个mapMutations按钮可以看到修改state效果和commitMutation1方法是相同的，点击第二个mapMutations按钮则可以看到可以通过第二个自定义参数给state赋值（当然也可以用于逻辑处理）。