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

【问题标题】：How to access a Vuex data property from another Vuex data property?如何从另一个 Vuex 数据属性访问 Vuex 数据属性？
【发布时间】：2018-08-13 09:18:57
【问题描述】：

我将颜色变量存储在 vuex 商店中名为“colors[]”的数组中，以便在我的 vue 应用程序中轻松访问。当我在组件方法或内联样式中访问这些颜色时，这可以正常工作。

现在我在我的 Vuex 存储中存储了一个名为“priorities[{}]”的对象数组。每个优先级都有一个附加的颜色，比如“绿色”等。这个颜色变量的十六进制值应该来自我的 vuex 存储中的“颜色”数组。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

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: THIS SHOUD LINK TO colors.green        
      },
      {
        id: 2,
        name: 'Medium',
        value: 20,
        color: THIS SHOUD LINK TO colors.orange           
      },
      {
        id: 3,
        name: 'High',
        value: 30,
        color: THIS SHOUD LINK TO colors.red     
      }
    }
  }

所以，我基本上尝试了从 this.$store.state.colors 到 state.colors 的所有方法但在我看来，这通常是行不通的。但是如何做到这一点呢？

【问题讨论】：

标签： vue.js vuex

【解决方案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

【讨论】：

状态与吸气剂不同？如果用户想要优先添加/修改某些东西，那么他将如何做呢？
Ja，我也想过。但是我不能动态添加新的优先级
您现在可以通过改变priorities 状态来添加更多优先级。如果您想使用基于colors 状态的颜色的优先级，则可以使用prioritiesWithColors getter。
这个解决方案很好用！我只是选择在 vuex 存储之外使用常量，因为在我们的用例中它更简单，因为我们不会从用户端动态更改颜色。
当然，没问题。

【解决方案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     
      }
    }
  }

【讨论】：

这样，优先级不会变成reactive，这会导致问题。使用这种方法，如果你改变了colors的值，priorities的值不会根据colors的新值而改变。
@JulianPaoloDayag 是什么让你认为它不再是被动的？
我认为用户不会随时更改green 颜色的十六进制值。但他肯定会添加更多颜色和优先级或修改现有的优先级。你怎么看？ @JulianPaoloDayag
重要的不是你的想法，而是可能性。用户可能会更改颜色，并且会更动态地添加。
@JulianPaoloDayag 我想让 OP 来决定。每个问题都有一个相关的用例，并且始终需要在事物之间进行良好的权衡。