如何从mapState()内部访问组件数据?

Question

根据我的道具buttonType的值，我想检索不同的存储变量:

...mapState({
backgroundColor: state => this.buttonType === 'primary'
? state.primary_button.background_color
: state.secondary_button.background_color
})

这不起作用，因为箭头函数有自己的this。所以我试了:

...mapState({
backgroundColor: function(state) {
return this.buttonType === 'primary'
? state.primary_button.background_color
: state.secondary_button.background_color
}
})

得到这个错误:

期望的方法简写

正确的方法是什么?

Answer 1

我会把它分成三个道具:primaryColor和secondaryColor(使用mapState)，然后是一个单独的计算道具，根据buttonType返回其中一个:

export default {
computed: {
...mapState({
primaryColor: state => state.primary_button.background_color,
secondaryColor: state => state.secondary_button.background_color,
}),
backgroundColor() {
return this.buttonType === 'primary'
? this.primaryColor
: this.secondaryColor
}
}
}

或者如果你只想要一个道具，你可以直接引用store的状态:

export default {
computed: {
backgroundColor() {
return this.buttonType === 'primary'
? this.$store.state.primary_button.background_color
: this.$store.state.secondary_button.background_color
}
}
}