Pass key to vuex getter to get diferent state

Question

In vuex store there is many similar states:

const state = {
  count: 0,
  count2: 1,
  count3: 2
};

and for every state there is a corresponding getter:

const getters = {
  getCount: (state) => state.count,
  getCount2: (state) => state.count2,
  getCount3: (state) => state.count3,
};

Is there a way to turn these 3 in one dynamic getter who would accept the key and get the corresponding data.

Higher order functions does the trick – Lucas David Ferrero Nov 02 '21 at 22:52 — Lucas David Ferrero, Nov 02 '21 at 22:52

score 3 · Answer 1 · answered Nov 02 '21 at 22:50

3

You could create another getter, and use another function to pass the parameter.

const getters = {
  getCount: (state) => state.count,
  getCount2: (state) => state.count2,
  getCount3: (state) => state.count3,
  // The param could be "count" || "count2"
  getAllCount: (state) => (param) =>  state[param] 
  // and calling
  this.$store.getters['getAllCount'](theParamKey)
};

answered Nov 02 '21 at 22:50

Woohaik

1,084
1
6
24

Thx a lot mate, cheers :) – Nikola Pavicevic Nov 02 '21 at 23:17

score 2 · Answer 2 · answered Nov 02 '21 at 22:59

You have two options, first, you could return a function from the getter as explained here, or, and that would make more sense in many situations, you could just change the state and return an object (or an array):

const state = {
  count: {
    count1: 0,
    count2: 1,
    count3: 2,
  }
};

const getters = {
  getCount: (state) => state.count,
};

In my experience, the second option is usually the best one, both because it's easier for other developers and maintenance (returning a function from a getter is quite counter-intuitive) and because it's super easy to handle objects (or arrays), but surely the first option has its use-cases too.

Thx a lot mate, cheers :) – Nikola Pavicevic Nov 02 '21 at 23:16 — Nikola Pavicevic, Nov 02 '21 at 23:16

score 1 · Accepted Answer · edited Feb 14 '23 at 12:44

1

We have a way to pass arguments to a getters function Here is how you do it

const getters = {
  getCount: (state) => (arg) => {
    return state[arg]; // where arg can be count or count1 or count2
  }
}

Reference link: https://vuex.vuejs.org/guide/getters.html#method-style-access

edited Feb 14 '23 at 12:44

Nikola Pavicevic

21,952
9
25
46

answered Nov 03 '21 at 04:59

Amaarockz

4,348
2
9
27

Pass key to vuex getter to get diferent state

3 Answers3