Vuex里面四个map方法(mapState、mapGetters、mapActions、mapMutation)

本章节主要讲述Vuex里面的四个优化代码的map方法，mapState、mapGetters、mapActions、mapMutation

一、store文件夹下面index.js主要内容，包含state(用于存储数据)、getters(计算属性)、mutatiions(加工数据)、actions(响应组件动作、写逻辑)

二、四个map方法，使用Vuex会频繁出现this.$store.commit、this.$store.dispatch、this.$store.state、this.$store.getters,为了避免出现重复代码，导致代码冗余，使用map的方法来简化代码。

先从vuex中导入要使用的map方法

import {mapState,mapActions,mapMutations、mapGetters} from 'vuex';

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

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

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

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

    //借助mapGetters生成计算属性：bigSum（数组写法）
    ...mapGetters(['bigSum'])
},

3、mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数，如果需要传递参数需要在模板中传递号参数

methods:{
    //靠mapActions生成：incrementOdd、incrementWait（对象形式）
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

    //靠mapActions生成：incrementOdd、incrementWait（数组形式）
    ...mapActions(['jiaOdd','jiaWait'])
}

4、mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数，如果需要传递参数需要在模板中传递号参数

methods:{
    //靠mapActions生成：increment、decrement（对象形式）
    ...mapMutations({increment:'JIA',decrement:'JIAN'}),
    
    //靠mapMutations生成：JIA、JIAN（对象形式）
    ...mapMutations(['JIA','JIAN']),
}