优化计算属性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的写法
const a = {
actions : {
......
},
mutations : {
......
},
state : {
......
},
getters : {
......
}
}
export default new Vuex.Store({
modules : {
aModule : a
}
})
<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>