優(yōu)化計(jì)算屬性mapState、mapGetters和methods的mapActions、mapMutations

在學(xué)習(xí)以下內(nèi)容前，先了解ES6的拓展運(yùn)算符’…’

• ‘…’的功能：可以將所在數(shù)組或?qū)ο筮M(jìn)行拆分，也就是將[]和{}去除

let arr = [1, 2, 3, 4, 5]
console.log(...arr)
// 執(zhí)行結(jié)果
1 2 3 4 5

let arr = {
    x : 1,
    y : 2
}
console.log({...arr})
// 執(zhí)行結(jié)果
{x : 1, y : 2}

mapState、mapGetters、mapActions、mapMutations的兩種寫法

• 第一種：數(shù)組形式（保證computed的屬性名、methods的方法名和state的對(duì)象名是一致的）

computed : {
    // 數(shù)組形式
    ...mapState(['對(duì)象名1', '對(duì)象名2', '對(duì)象名3']),
    ...mapGetters(['方法名1', '方法名2', '方法名3'])
},
methods: {
    // 數(shù)組形式
    ...mapActions(['對(duì)象名1', '對(duì)象名2', '對(duì)象名3']),
    ...mapMutations(['方法名1', '方法名2', '方法名3'])
}

• 第二種：對(duì)象形式（屬性名和值可以一致，也可不一致）

computed : {
    // 對(duì)象形式
    ...mapState({屬性名1 : '值1', 屬性名2 : '值2', 屬性名3 : '值3'}),
    ...mapGetters({屬性名1 : '值1', 屬性名2 : '值2', 屬性名3 : '值3'})
},
methods: {
    // 對(duì)象形式
    ...mapActions({屬性名1 : '值1', 屬性名2 : '值2', 屬性名3 : '值3'}),
    ...mapMutations({屬性名1 : '值1', 屬性名2 : '值2', 屬性名3 : '值3'})
}

有沒有mapState、mapGetters、mapActions、mapMutations的區(qū)別

• 沒有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（數(shù)組形式）

<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>
    // 使用的時(shí)候可以先引入，也可以自動(dòng)添加
    import {mapState, mapGetters, mapActions, mapMutations} from 'vuex'
    export default {
        name : 'Name',
        computed : {
            ...mapState(['mS']),
            ...mapGetters(['mG'])
        },
        methods : {
            ...mapActions(['mAB']),
            ...mapMutations(['mMB'])
        }
    }
</script>

• 區(qū)別：在使用...mapState(['user'])時(shí)，相當(dāng)于生成了一個(gè)user(){return this.$store.state.user}（舉例說明，其他類型同樣）
• 注意：在計(jì)算屬性中，要確保屬性名和state的對(duì)象名、方法名和actions方法名是一致的才能使用mapState、mapGetters的數(shù)組形式。對(duì)象形式如果是{user : 'user'}一致的情況也可以使用，但若兩邊不一致則需要進(jìn)行區(qū)分。（建議弄成一致的形式）（舉例說明，其他類型同樣）

屬性名(){
    return this.$store.state.對(duì)象名
}

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

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

• 因?yàn)閙apState、mapGetters所使用的方法只有g(shù)et，沒有set，而v-model指令是雙向綁定，要有set和get，所以在v-model指令中還是使用原有的方式{{$store.state.(模塊名).對(duì)象名}}去調(diào)用即可。

使用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>
    // 使用的時(shí)候可以先引入，也可以自動(dòng)添加
    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>