优化计算属性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}
1
2
3
4
5
6
7
8
9
10
11
12

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'])
}
1
2
3
4
5
6
7
8
9
10

• 第二种：对象形式（属性名和值可以一致，也可不一致）

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'})
}
1
2
3
4
5
6
7
8
9
10

有没有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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

• 有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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

• 区别：在使用...mapState(['user'])时，相当于生成了一个user(){return this.$store.state.user}（举例说明，其他类型同样）
• 注意：在计算属性中，要确保属性名和state的对象名、方法名和actions方法名是一致的才能使用mapState、mapGetters的数组形式。对象形式如果是{user : 'user'}一致的情况也可以使用，但若两边不一致则需要进行区分。（建议弄成一致的形式）（举例说明，其他类型同样）

属性名(){
    return this.$store.state.对象名
}

方法名(){
    return this.$store.dispatch('方法名')
}
1
2
3
4
5
6
7

注意：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
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25