優化計算屬性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>