时间戳

首页 > 解决方案 > 如何从 mapState() 内部访问组件数据？

vue.js - 如何从 mapState() 内部访问组件数据？

问题描述

根据我的 prop 的值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
  }
})

收到此错误：

预期方法简写

这样做的正确方法是什么？

标签： vue.jsarrow-functions

解决方案

我会将其拆分为三个道具：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
    }
  }
}

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

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

推荐阅读