8.4四个map方法的使用
8.4.1讲解生成代码函数mapState和mapGetters
注意点1：
问题：mapState干啥的？
答案：用来生成重复代码的，比如return this.$store.state.xxxx这段就非常重复，无法复用。其中mapState采用{K:V}形式，K为计算属性名或者方法名，V为属性名
sum(){
return this.$store.state.sum
},
school(){
return this.$store.state.school
},
subject(){
return this.$store.state.subject
},
---------------------------------------------------------------------------------
等同于
mounted() {
const x = mapState({he:'sum',xuexiao:'school',xueke:'subject'})
console.log(x)
}
打印结果：
注意点2：
问题：computed计算属性如何添加mapState？
答案：不能把mapState({he:‘sum’,xuexiao:‘school’,xueke:‘subject’})直接放上去会报错为啥？因为mapState({he:‘sum’,xuexiao:‘school’,xueke:‘subject’})返回的是一个{}对象，如果想使用，请使用ES6的语法，语法：…mapState({})，其中…的作用是把mapState中的{}中的每一组展开放在computed计算属性中
computed:{
...mapState({he:'sum',xuexiao:'school',xueke:'subject'})
}
8.4.2讲解生成代码函数mapMutations与mapActions
注意点1：
使用mapMutations与mapActions若需要传递参数，必须在绑定事件时就传参
比如：调用加的函数increment，使用原方法功能没问题，但是如果写成简写形式就会报错如图，错误原因就是绑定事件不传参，默认传递的时$event的触发事件，因为原方法知道把传参n传递过去，而简写方式并不知道传啥过去，就会默认把$event对象传递过去。
<button @click="increment">+</button>
//原方法，需要传递参数n
increment(){
this.$store.commit('JIA',this.n)
}
//简写方法
...mapMutations({increment:'JIA',decrement:'JIAN'}),
解决方案：绑定事件时就传参就行了
<button @click="increment(n)">+</button>
本人其他相关文章链接
1.《进阶篇第8章：vuex》包括理解vuex、安装vuex、搭建vuex环境、四个map方法的使用、模块化+名命空间
2.vue2知识点：理解vuex、安装vuex、搭建vuex环境
3.vue2知识点：vuex中四个map方法的使用
4.vue2知识点：模块化+名命空间
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/106153.html
