Vuex中的四个map方法的使用

介绍四个map方法之前先介绍一个es6语法 ...

... 是es6中的展开运算符，作用是把数组或对象一一展开，

如：
let a = {
    x:100,
    y:200
}
let b = {
    neo:1,
    ...a,
    two:2
}
//b的结果就是：{neo:1,x:100,y:200,two:2}

介绍完展开运算符下面开始正式介绍Vux中的四个map方法

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

mapState方法会在$store.state中找数据，并把找的数据返回

语法：mapState(要找的数据)

computed:{
    //借助mapState生成计算属性，sum、school、subject（对象写法）
    ...mapState({sum:'sum',school:'school',subject:'subject'}),
    
    //借助mapState生成计算属性，sum、school、subject（数组写法）
    ...mapState(['sum','school','subject'])
}

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

mapGetters方法会在$store.getters中找数据，并把找的数据返回

computed{
    //借助mapGetters生成计算属性：bigSum（对象写法）
    ...mapGetters({bigSum:'bigSum'})，
    //借助mapGetters生成计算属性：bigSum（数组写法）
    ...mapGetters([bigSum:'bigSum'])
}

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

mapActions方法会调用$store.dispatch来访问actions中的方法，并把匹配的方法返回

computed:{
    //借助mapActions生成对应方法，方法会调用dispatch来联系actions（对象写法）
    ...mapActions({addOdd:'jiaodd',waitAdd:'wait'}),
​
    //借助mapActions生成对应方法，方法会调用dispatch来联系actions（素组写法）
    ...mapActions(['jiaodd','wait'])
}   

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

mapMutations方法会调用$store.commit来访问mutations中的方法，并把匹配的方法放回

computed:{
    //借助mapMutations生成对应方法，方法会调用commit来联系mutations（对象写法）
    ...mapMutations({bonus:'JIA',impairment:'JIAN'}),
​
    //借助mapMutations生成对应方法，方法会调用commit来联系mutations（数组写法）
    ...mapMutations(['JIA','JIAN'])
}

注意事项

mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象

如：<button @click="JIA(value)"></button>

Vuex中的map方法中的数组写法，数组的值必须与store中所存在的值名一样，并且模板中的数据也得一致

正确示范：
const state={
    n:1
}
computed:{
    ...mapState(['n'])
}
//在模板中
<h3>n的值是{{n}}</h3>