辅助函数mapMutations解析
介绍
mapMutations是Vuex的mutation的辅助函数
,用于在组件中映射mutation内的方法,以便在该组件中直接使用mutation里的方法 (语法糖)
使用步骤
1.在组件中导入vuex中的mapMutations
1 | import { mapMutations } from 'vuex' |
2.在组件中导入mutation里的方法名
1 | ...mapMutations([ //使用es6的拓展运算符 |
这一步,是将mutation里的函数映射到组件里,在组件里 :
1 | this.INCREASE_SHOPCART === this.$store.commit('INCREASE_SHOPCART') //true |
在有参数的情况下,mutation的state默认参数可以省略 :
1 | this.INCREASE_SHOPCART(id) === this.$store.commit('INCREASE_SHOPCART',id) //true |
组件中使用 this.$store.commit('xxx')
提交 mutation,或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit
调用(需要在根节点注入 store)。
关于映射官网也有相关的介绍说明 –> Mutation
3、举个(热辣辣)的栗子🌰 :点击btn按钮增减商品数量
3.1 mutations
1 | //mutations.js |
3.2 组件里的methods
如果对使用方法有疑问可以看之前的文章:Vuex的使用,里面有介绍。
1 | import { mapMutations } from 'vuex' // 先从vuex里导入 mapMutations |
3.3 Vue文件
我们可以直接调用methods里定义的方法即可
1 | //Cart.vue |
总结
主要介绍使用mapMutations
辅助函数,内部将mutation
里的方法映射到该组件内,相比使用this.$store.commit('xxx')
更为之方便一点。除此之外还有mapState
, mapActions
, 用法也类似。在系列(一) – Vuex的使用
中的每个核心概念都介绍了辅助函数的用法,又或者可能移步到官网查看更详细的介绍喔 –> Vuex官网
CodeSandbox
注意 如遇到CodeSandBox打开失败,请尝试按下图操作,然后分窗口就能一边看代码一边看效果啦
本部落格所有文章除特別聲明外,均採用 CC BY-NC-SA 4.0 許可協議。轉載請註明來自 小胖墩er!
評論
TwikooGitalk