CODEWITHSUNDEEP
vue.jsvuex
tcam
tcam

Reputation: 318

How to access a Vuex data property from another Vuex data property?

I store my color variables in an array called "colors[]" in the vuex store for easy access throughout my vue app. This works fine when I access those colors inside components methods or inline style.

Now I store an array of objects in my Vuex store called "priorities[{}]". Each of the priorities has a color attached to it like "green" etc. The hex values of the this colors variables should be from the "colors" array in my vuex store.

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     
      }
    }
  }

So, I basically tried everything from this.$store.state.colors to state.colors But it seems to me that this is generally not working. However how would one do this?

Upvotes: 0

Views: 1333

Answers (2)

Julian Paolo Dayag
Julian Paolo Dayag

Reputation: 3719

Move your priorities to 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
      })
    }
  }
})

Then you can access it like this:

this.$store.getters.prioritiesWithColors

Upvotes: 3

void
void

Reputation: 36703

There is no direct way but you can store the color hex mapping in a seperate object.

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     
      }
    }
  }

Upvotes: 0

Related Questions