时间戳

首页 > 解决方案 > 如何从另一个 Vuex 数据属性访问 Vuex 数据属性？

vue.js - 如何从另一个 Vuex 数据属性访问 Vuex 数据属性？

问题描述

我将颜色变量存储在 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.jsvuex

解决方案

将您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

推荐阅读