Vuex中的Mutations的具体使用方法

使用 Vuex 来管理 Vue.js 应用的状态，Mutations 是其中的一个重要概念，它可以对 Vuex 中的State状态进行修改，能够保证状态的唯一性以及状态的修改追踪。下面是“Vuex中的Mutations的具体使用方法”的完整攻略：

Mutations是什么

在 Vuex 中，Mutation 就是一种修改状态的方法，它能够保证 Vuex 中的 state 在 Vue 组件中是唯一的，并且能够追踪状态的变化。

Mutation 是一个纯函数，它的第一个参数是 state 本身，之后的参数为需要更新的新值。Mutation 函数只能进行同步修改操作。

mutations: {
    updateCount (state, num) {
        state.count = num
    }
}

上述代码中，updateCount 是一个 Mutation 函数，其中定义了一个修改 State 的行为，通过传递参数 num，来更新 state 中的 count。

如何使用Mutation

Mutation 函数是通过提交一个 Mutation 来触发的，在 Vue 组件中可以通过 this.$store.commit() 方法来触发 Mutation。

<button @click="$store.commit('increment')">点我自增</button>

methods: {
    increment() {
        this.$store.commit('increment')
    }
}

上述代码中，通过按钮点击事件，调用了 increment 方法，而这个方法通过 this.$store.commit() 方法提交了一个 increment 的 Mutation，从而触发了 Vuex 中的 state 的修改。

Mutation的常规使用

在实际开发中，我们会将一系列 state 修改操作，封装在 Mutation 中，以便在 Vue 组件中调用。下面的代码演示了一个实现计数器的例子：

// state
const state = {
    count: 0
}

// mutations
const mutations = {
    increment (state) {
        state.count++
    },
    decrement (state) {
        state.count--
    },
    resetCount (state) {
        state.count = 0
    }
}

// actions
const actions = {}

// export store
export default new Vuex.Store({
    state,
    mutations,
    actions
})

上述代码中，count 表示计数器的值，increment / decrement / resetCount 分别为递增/递减/重置计数器的 Mutation 函数。

在 Vue 组件中，可以通过 methods() 来触发 Mutation：

<template>
    <div>
        <h1>我是计数器应用</h1>
        <h2>{{count}}</h2>
        <button @click="increment">+1</button>
        <button @click="decrement">-1</button>
        <button @click="resetCount">清零</button>
    </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
    computed: {
        ...mapState(['count'])
    },
    methods: {
        ...mapMutations([
            'increment',
            'decrement',
            'resetCount'
        ]),
    }
}
</script>

上述代码中，通过 mapState 和 mapMutations，来将 store 中的 state 和 mutations 映射到组件中，从而在组件中可以直接使用 this 访问对应的数据和方法，如：{{count}}、 increment()。

Mutation的模块化使用

假设现在有两个模块A和B，每个模块都有一个 count 的状态，并且需要通过 Mutation 来实现对 count 数据的修改，则需要在 Vuex 中配置两个模块。

• AModule

const AModule = {
    namespaced: true, // 开启命名空间
    state: {
        ACount: 0           
    },
    mutations: {
        increment (state, payload) {
            state.ACount += payload.num
        },
        decrement (state, payload) {
            state.ACount -= payload.num
        }
    }
}

export default AModule

• BModule

const BModule = {
    namespaced: true,  // 开启命名空间
    state: {
        BCount: 0           
    },
    mutations: {
        increment (state, payload) {
            state.BCount += payload.num
        },
        decrement (state, payload) {
            state.BCount -= payload.num
        }
    }
}

export default BModule

由于 AModule 和 BModule 都开启了命名空间，所以调用 Mutation 时需要使用 dispatch 来分别触发，dispatch 的第一个参数为需要调用的 actions 函数或 Mutation 名称，其中的第二个参数为需要传入的 Payload，则可以这样使用：

<template>
    <div>
        <h2>我是模块A</h2>
        <h3>{{ACount}}</h3>
        <button @click="Aincrement">A模块+1</button>
        <button @click="Adecrement">A模块-1</button>
        <br />
        <br />
        <h2>我是模块B</h2>
        <h3>{{BCount}}</h3>
        <button @click="Bincrement">B模块+1</button>
        <button @click="Bdecrement">B模块-1</button>
    </div>

</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
    computed: {
        ...mapState({
            ACount: (state) => state.AModule.ACount, // 获取模块A的状态ACount
            BCount: (state) => state.BModule.BCount // 获取模块B的状态BCount
        })
    },
    methods: {
        ...mapMutations('AModule', [
            'increment',
            'decrement'
        ]),
        ...mapMutations('BModule', [
            'increment',
            'decrement'
        ]),
        Aincrement() {
            this.$store.commit('AModule/increment', {num: 1}) // 通过commit提交各自模块的Mutation
        },
        Adecrement() {
            this.$store.commit('AModule/decrement', {num: 1})
        },
        Bincrement() {
            this.$store.commit('BModule/increment', {num: 1})
        },
        Bdecrement() {
            this.$store.commit('BModule/decrement', {num: 1})
        }
    }
}
</script>

上述代码中，首先在局部引入 mapState 和 mapMutations，然后通过 mapState() 获取模块的状态，通过 mapMutations() 获取模块的 Mutation 方法，最后展示在模板中，并在方法中进行使用。可以看到，通过 $store.commit() 方法可以直接提交各自模块的 Mutation，从而修改对应的局部 state。