Vuex系列之（八）四个map方法的使用

四个map方法的使用

这四个map方法的作用是帮我们生成代码。

计算属性优化了模板中的语法，使得插值语法变得简洁，但仍然没有解决代码冗余的问题，只是将插值语法中的冗余转移到了计算属性中

为什么我们需要生成代码？

模板中获取state中的数据时，代码冗余很高，存在代码优化的可能。

可以通过计算属性简化模板中的代码

而计算属性中的代码Vuex可以帮我们生成，就是通过map方法实现的，我们只需要提供计算属性名和state中的key即可。

js中的Object对应的是{}

导入四个map方法

import {mapXXX,mapXXX} from 'vuex'

mapState方法：用于帮助我们映射state中的数据为计算属性

computed: {
  	// 我们自己写的计算属性如下，mapState方法帮我们生成的代码也是类似的
    // sumNumber(){
    // 	return this.$store.state.sumNumber
    // },
    // str1(){
    // 	return this.$store.state.str1
    // },
    // str2(){
    // 	return this.$store.state.str2
    // },
  
    //借助mapState生成计算属性，从state中读取数据。（对象写法）
    // mapState方法的返回值是一个对象{sum:f,big:f,stra:f,strb:f}，而且其中的函数是有函数名的，不过并不影响我们的使用
     ...mapState({sum:'sum',school:'school',subject:'subject'}),
         
    //借助mapState生成计算属性，从state中读取数据。（数组写法）
    //这种写法有前提：计算属性名和state中的key名相同才可以
    //这里数组中的每个元素有两个用途，确定计算属性名和指定state中的key
    ...mapState(['sum','school','subject']),
},

mapGetters方法：用于帮助我们映射getters中的数据为计算属性

computed: {
    // 我们自己写的计算属性如下，mapGetters方法帮我们生成的代码也是类似的
    // bigNum(){
    // 	return this.$store.getters.bigNum
    // },  

    //借助mapGetters生成计算属性，从getters中读取数据。（对象写法）
    ...mapGetters({bigSum:'bigSum'}),

    //借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
    //这种写法有前提：计算属性名和getters中的key名相同才可以
    ...mapGetters(['bigSum'])
},

对象的简写形式：只有在key和value完全相同的情况下才可以简写，如{a:a} <=> {a}，以下情况是不可以简写的，{a:'a'}【js中对于这种情况是没有简写形式的】

Devtools中对于自己编写的计算属性和通过map方法生成的计算属性的表示是不同的

自己编写的

自动生成的

mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数

methods:{
  	// 这是我们自己写的方法
    // conditionAdd(){
    // 	this.$store.dispatch('conditionAdd',this.selectedNumber)
    // },
    // addLater(){
    // 	this.$store.dispatch('addLater',this.selectedNumber)
    // }

  	// mapActions方法帮我们生成的代码如下，是需要我们自己传递参数的
    // conditionAdd(value){
    // 	this.$store.dispatch('conditionAdd',value)
    // },
    // addLater(value){
    // 	this.$store.dispatch('addLater',value)
    // }
  
    //借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
    ...mapActions({conditionAdd:'jiaOdd',addLater:'jiaWait'})

    //借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(数组写法)
    ...mapActions(['jiaOdd','jiaWait'])
}

mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数

methods:{
  	// 这是我们自己写的方法
    // addition(){
    // 	this.$store.commit('JIA',this.selectedNumber)
    // },
    // subscribe(){
    // 	this.$store.commit('JIAN',this.selectedNumber)
    // },

    // mapMutations方法帮我们生成的代码如下，是需要我们自己传递参数的
    // addition(value){
    // 	this.$store.commit('JIA',value)
    // },
    // subscribe(value){
    // 	this.$store.commit('JIAN',value)
    // },
  
    //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
    ...mapMutations({addition:'JIA',subscribe:'JIAN'}),
    
    //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(数组写法)
    ...mapMutations(['JIA','JIAN']),
}