Bootstrap

优化计算属性mapState、mapGetters和methods的mapActions、mapMutations

优化计算属性mapState、mapGetters和methods的mapActions、mapMutations

在学习以下内容前,先了解ES6的拓展运算符’…’

  • ‘…’的功能:可以将所在数组或对象进行拆分,也就是将[]和{}去除
let arr = [1, 2, 3, 4, 5]
console.log(...arr)
// 执行结果
1 2 3 4 5

let arr = {
    x : 1,
    y : 2
}
console.log({...arr})
// 执行结果
{x : 1, y : 2}

mapState、mapGetters、mapActions、mapMutations的两种写法

  • 第一种:数组形式(保证computed的属性名、methods的方法名和state的对象名是一致的)
computed : {
    // 数组形式
    ...mapState(['对象名1', '对象名2', '对象名3']),
    ...mapGetters(['方法名1', '方法名2', '方法名3'])
},
methods: {
    // 数组形式
    ...mapActions(['对象名1', '对象名2', '对象名3']),
    ...mapMutations(['方法名1', '方法名2', '方法名3'])
}
  • 第二种:对象形式(属性名和值可以一致,也可不一致)
computed : {
    // 对象形式
    ...mapState({属性名1 : '值1', 属性名2 : '值2', 属性名3 : '值3'}),
    ...mapGetters({属性名1 : '值1', 属性名2 : '值2', 属性名3 : '值3'})
},
methods: {
    // 对象形式
    ...mapActions({属性名1 : '值1', 属性名2 : '值2', 属性名3 : '值3'}),
    ...mapMutations({属性名1 : '值1', 属性名2 : '值2', 属性名3 : '值3'})
}

有没有mapState、mapGetters、mapActions、mapMutations的区别

  • 没有mapState、mapGetters、mapActions、mapMutations
<template>
    <div>
        <h3>mapState:{{mS}}</h3>
        <h3>mapGetters:{{mG}}</h3>
        <button @click="mAB">mapActions Button</button>
        <button @click="mMB">mapMutations Button</button>
    </div>
</template>

<script>
    export default {
        name : 'Name',
        computed : {
            mS(){
                return this.$store.state.mS
            },
            mG(){
                return this.$store.getters.mG
            }
        },
        methods : {
            mAB(){
                return this.$store.dispatch('mAB')
            },
            mMB(){
                return this.$store.commit('mMB')
            }
        }
    }
</script>
  • 有mapState、mapGetters、mapActions、mapMutations(数组形式)
<template>
    <div>
        <h3>mapState:{{mS}}</h3>
        <h3>mapGetters:{{mG}}</h3>
        <button @click="mAB">mapActions Button</button>
        <button @click="mMB">mapMutations Button</button>
    </div>
</template>

<script>
    // 使用的时候可以先引入,也可以自动添加
    import {mapState, mapGetters, mapActions, mapMutations} from 'vuex'
    export default {
        name : 'Name',
        computed : {
            ...mapState(['mS']),
            ...mapGetters(['mG'])
        },
        methods : {
            ...mapActions(['mAB']),
            ...mapMutations(['mMB'])
        }
    }
</script>
  • 区别:在使用...mapState(['user'])时,相当于生成了一个user(){return this.$store.state.user}(举例说明,其他类型同样)
  • 注意:在计算属性中,要确保属性名和state的对象名、方法名和actions方法名是一致的才能使用mapState、mapGetters的数组形式。对象形式如果是{user : 'user'}一致的情况也可以使用,但若两边不一致则需要进行区分。(建议弄成一致的形式)(举例说明,其他类型同样)
属性名(){
    return this.$store.state.对象名
}

方法名(){
    return this.$store.dispatch('方法名')
}

注意:v-model指令跟mapState、mapGetters不能一同使用。

  • 因为mapState、mapGetters所使用的方法只有get,没有set,而v-model指令是双向绑定,要有set和get,所以在v-model指令中还是使用原有的方式{{$store.state.(模块名).对象名}}去调用即可。

使用modules的mapState、mapGetters、mapActions、mapMutations的写法

// store.js文件
const a = {
    actions : {
        ......
    },
    mutations : {
        ......
    },
    state : {
        ......
    },
    getters : {
        ......
    }
}

export default new Vuex.Store({
    modules : {
        aModule : a
    }
})
// Name.vue
<template>
    <div>
        <h3>mapState:{{mS}}</h3>
        <h3>mapGetters:{{mG}}</h3>
        <button @click="mAB">mapActions Button</button>
        <button @click="mMB">mapMutations Button</button>
    </div>
</template>

<script>
    // 使用的时候可以先引入,也可以自动添加
    import {mapState, mapGetters, mapActions, mapMutations} from 'vuex'
    export default {
        name : 'Name',
        computed : {
            ...mapState('aModule', ['mS']),
            ...mapGetters('aModule', ['mG'])
        },
        methods : {
            ...mapMutations('aModule', ['mAB']),
            ...mapActions('aModule', ['mMB'])
        }
    }
</script>
;