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

本文主要是介绍优化计算属性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 5let 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>