[vue] Vuex中mapState/mapGetters/mapActions/mapMutations的用法

这四个方法用于在组件中批量生成vuex相关代码，很大程度上精简了vuex的代码

1.引入

import { mapState,mapGetters... } from 'vuex'

2.使用

使用方法基本相同，都有 "对象写法" 和 "数组写法"

例如mapState：

computed:{

    // 没用mapState的写法
    计算属性1(){
        return this.$store.state.x
    },
    计算属性2(){
        return this.$store.state.x
    }

    // 用了mapState
    // 对象写法
    ...mapState({'属性名1':'state中的属性名1','属性名2':'state中的属性名2'})

    // 数组写法
    ...mapState(['属性和state同名1','属性和state同名2'])
}

• mapState : 在计算属性中使用，避免组件中总是写“$store.state.xxx”这样的代码，使用后可以直接写xxx
• mapGetters :在计算属性中使用，避免组件中总是写“$store.getters.xxx”这样的代码，使用后可以直接写xxx
• mapActions : 在methods中使用，避免组件重复写“xxx(){this.$store.dispach('xxx',value)}”这样的代码，使用后，相当于批量生成了
• mapMutations :在methods中使用，避免组件重复写“xxx(){this.$store.commit('xxx',value)}”这样的代码，使用后，相当于批量生成了