[JavaScript知识库]Vuex的使用（六）——mutations的定义和用法

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

state是在整个前端应用中需要共享和维护的状态，而在之前的几章里主要介绍了state及其衍生概念的共享和使用，下面重点介绍一下state的维护方式——mutations。

官网对mutation的定义：更改Vuex的store中的状态的唯一方法是提交mutation。笔者对mutations的理解是：Vuex需要对state进行管理，则必须控制state的维护入口，因此所有对state的变更请求都必须通过mutations来完成。这和Vue通过Object.defineProperty和Proxy来监听data中的数据变化有异曲同工之妙。

接下来介绍一下mutations的基本用法。首先在Vuex中声明mutations（修改文件路径为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: state => {
            // 在mutations的回调函数内可以修改state的值
            state.param1 += " add something";
        }
    }
});

export default store;

在组件中调用Vuex的mutations来改变state的值（新增文件路径为src\components\componentF.vue），代码如下：

<template>
    <div>
        <span>mutations用法</span>
        <br />
        <span>state in vuex：{{param1}}</span>
        <br />
        <button @click="commitMutation1">mutations</button>
    </div>
</template>

<script>
import { mapState} from "vuex";
export default {
    name: "component-f",
    computed: {
        ...mapState(["param1"])
    },
    methods: {
        commitMutation1() {
            // 通过this.$store.commit("mutations方法名")的方式调用mutations
            this.$store.commit("mutation1");
        }
    }
};
</script>

<style scoped>
</style>

运行后点击页面上的mutations按钮，可以看到param1被修改为了“state param add something”。