目标:
掌握模块中 mutation 的调用语法
注意:
默认模块中的 mutation 和 actions 会被挂载到全局,需要开启命名空间,才会挂载到子模块。
调用方式:
- 直接通过 store 调用 $store.commit('模块名/mutations名 ', 额外参数)
- 通过 mapMutations 映射
- 默认根级别的映射 mapMutations([ mutations名’ ])
- 子模块的映射 mapMutations(‘模块名’, [‘mutations名’]) - 需要开启命名空间
代码示例
modules/user.js
const mutations = {
setUser (state, newUserInfo) {
state.userInfo = newUserInfo
}
}
modules/setting.js
const mutations = {
setTheme (state, newTheme) {
state.theme = newTheme
}
}
Son1.vue
<button @click="updateUser">更新个人信息</button>
<button @click="updateTheme">更新主题色</button>
<script>
export default {
methods: {
updateUser () {
// $store.commit('模块名/mutation名', 额外传参)
this.$store.commit('user/setUser', {
name: 'xiaowang',
age: 25
})
},
updateTheme () {
this.$store.commit('setting/setTheme', 'pink')
}
}
}
</script>
Son2.vue
<button @click="setUser({ name: 'xiaoli', age: 80 })">更新个人信息</button>
<button @click="setTheme('skyblue')">更新主题</button>
<script>
methods:{
// 分模块的映射
...mapMutations('setting', ['setTheme', '...']),
...mapMutations('user', ['setUser', '...']),
}
</script>