【Vue】获取模块内的mutations方法

本文主要是介绍【Vue】获取模块内的mutations方法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

目标：

掌握模块中 mutation 的调用语法

注意：

默认模块中的 mutation 和 actions 会被挂载到全局，需要开启命名空间，才会挂载到子模块。

调用方式：

1. 直接通过 store 调用 $store.commit('模块名/mutations名 ', 额外参数)
2. 通过 mapMutations 映射
   1. 默认根级别的映射 mapMutations([ mutations名’ ])
   2. 子模块的映射 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>

这篇关于【Vue】获取模块内的mutations方法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---