目录

一、引言 

二、完整代码

2.1. App.vue

2.2. main.js

2.3. Son1.vue

2.4. Son2.vue

2.5. index.js

---

一、引言 

本章节我们通过掌握辅助函数mapMutations，来简化前面章节中调用mutations函数的繁琐方式。mapMutations 和 mapState很像，它是把位于mutations中的方法提取了出来，映射到组件methods中。

 下面两者等价： 

二、完整代码

2.1. App.vue

<template><div id="app"><h1>根组件 - {{ title }} - {{ count }}</h1><input :value="count" @input="handleInput" type="text"><Son1></Son1><hr><Son2></Son2></div>
</template><script>
import Son1 from './components/Son1.vue'
import Son2 from './components/Son2.vue'
import { mapState } from 'vuex'export default {name: 'app',created () {console.log(this.$store.state.count)},data () {return {}},methods: {handleInput (e) {// 1.实时获取输入框的值const num = e.target.value// 2.提交mutation，调用mutation函数this.$store.commit('changeCount', num)}},computed: {...mapState(['count', 'title'])},components: {Son1,Son2}
}
</script><style></style>

2.2. main.js

import Vue from 'vue'
import App from './App.vue'
import store from '@/store/index'
console.log(store.state.count)Vue.config.productionTip = falsenew Vue({render: h => h(App),store
}).$mount('#app')

2.3. Son1.vue

<template><div class="box"><h2>{{ $store.state.title }}</h2>从vuex中获取的值：<label>{{ $store.state.count }}</label><br><button @click="subCount(1)">值 + 1</button><button @click="subCount(5)">值 + 5</button><button @click="subCount(10)">值 + 10</button><button @click="handleSub(1)">值 - 1</button><button @click="handleSub(5)">值 - 5</button><button @click="handleSub(10)">值 - 10</button><button @click="changeTitle">改标题</button></div>
</template><script>
import { mapMutations } from 'vuex'
export default {name: 'Son1Com',methods: {handleAdd (n) {// 错误代码（vue默认不会监测，监测需要成本）// this.$store.state.count++// console.log(this.$store.state.count)// 应该通过 mutation 核心概念，进行修改仓库数据// 需要提交调用mutationthis.$store.commit('addCount', n)},...mapMutations(['subCount']),changeTitle () {this.$store.commit('changeTitle', { name: '王哲晓', newTitle: '2024加油，迎接新的开始，新的起点，新的人生' })}}
}
</script><style lang="css" scoped>
.box {border: 3px solid #ccc;width: 400px;padding: 10px;margin: 20px;
}
h2 {margin-top: 10px;
}
</style>

2.4. Son2.vue

<template><div class="box"><h2>Son2 子组件</h2>从vuex中获取的值：<label>{{ count }}</label><br><button>值 - 1</button></div></template><script>
import { mapState } from 'vuex'
export default {name: 'Son2Com',computed: {...mapState(['count'])}
}
</script><style lang="css" scoped>
.box {border: 3px solid #ccc;width: 400px;padding: 10px;margin: 20px;
}
h2 {margin-top: 10px;
}
</style>

2.5. index.js

// 存放的是vuex相关的核心代码
import Vue from 'vue'
import Vuex from 'vuex'// 配置插件给Vue使用
Vue.use(Vuex)// 创建仓库（空仓库）
const store = new Vuex.Store({// 严格模式（有利于初学者，检测不规范的代码 => 上线的时候可以去掉）strict: true,// 1. 通过 state提供数据（所有组件可以共享）state: {title: '大标题',count: 100},// 2. 通过 mutations 可以提供修改数据的方法mutations: {// 所有mutation函数，第一个参数，都是 stateaddCount (state, n) {// 修改数据state.count += n},subCount (state, n) {// 修改数据state.count -= n},changeTitle (state, obj) {state.title = obj.newTitle},changeCount (state, newCount) {state.count = newCount}}
})// 导出给main.js使用
export default store