一、普通用法
在组件中直接访问:
this.$store.state.count
二、mapState辅助函数用法
使用对象展开运算符,会默认传递参数state,在函数中直接使用就可以了。这样就可以少些2个单词了(this.$store)
...mapState({
count: state => state.count
})
三、mapState辅助函数用法2
为了能够使用 this
获取组件自己的data数据,必须使用常规函数
...mapState({
count: function (state) {
return state.count + this.localCount
}
}),
四、mapState辅助函数用法3
当在计算属性中直接引用state的数据时,可以直接传递字符串数组。
...mapState([
'count'
])
这种写法就相当于上面的《mapState辅助函数用法1》
五、mapState的这几种用法可以混合使用
在计算属性中,可以根据实际需要,灵活的组合使用mapState的上面的3种用法。
...mapState({
countAll: function (state) {
return state.count + this.localCount
}
}),
...mapState([
'count'
])