Question

我将颜色变量存储在vuex存储区中名为“ colors []”的数组中，以便在整个vue应用程序中轻松访问。当我在组件方法或内联样式中访问这些颜色时，这种方法很好用。

现在，我在Vuex存储中存储了一个称为“ priorities [{}]”的对象数组。每个优先级都有一个与之相关的颜色，例如“绿色”等。此颜色变量的十六进制值应来自我的vuex存储中的“颜色”数组。

const id = this.id || this.activatedRoute.snapshot.params['id'];

所以，我基本上尝试了从this。$ store.state.colors到state.colors的所有内容但是在我看来，这通常是行不通的。但是，怎么做呢？

Answer 1

将您的priorities移至getters。

export default new Vuex.Store({
  state: {
    colors: {
      blue: '#1f96ff',
      green: '#0DAA54',
      orange: '#F49D3A',
      red: '#FF2833',
      purple: '#5E57BA',
      pink: '#B539AC'
    },
    priorities: [{
        id: 1,
        name: 'Low',
        value: 10,
        color: 'green'
      },
      {
        id: 2,
        name: 'Medium',
        value: 20,
        color: 'orange'
      },
      {
        id: 3,
        name: 'High',
        value: 30,
        color: 'red'
      }
    ]
  },
  getters: {
    prioritiesWithColors(state) {
      return state.priorities.map((priority) => {
        priority.color = state.colors[priority.color];
        return priority
      })
    }
  }
})

然后您可以像这样访问它：

this.$store.getters.prioritiesWithColors

Answer 2

没有直接方法，但是您可以将十六进制映射存储在单独的对象中。

const colors = {
      blue: '#1f96ff',
      green: '#0DAA54',
      orange: '#F49D3A',
      red: '#FF2833',
      purple: '#5E57BA',
      pink: '#B539AC'
};

export default new Vuex.Store({
state: {
  colors: colors,
  priorities: [
      {
        id: 1,
        name: 'Low',
        value: 10,
        color: colors.green        
      },
      {
        id: 2,
        name: 'Medium',
        value: 20,
        color: colors.orange           
      },
      {
        id: 3,
        name: 'High',
        value: 30,
        color: colors.red     
      }
    }
  }

如何从另一个Vuex数据属性访问Vuex数据属性？

2 个答案: