将 key 传递给 vuex getter 以获得不同的状态

Question

在vuex store中有很多类似的状态：

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

每个州都有对应的 getter:

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

有没有办法把这 3 个动态地变成一个 getter 谁会接受密钥并得到相应的数据。

Answer 1

您可以创建另一个 getter，并使用另一个函数来传递参数。

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

Answer 2

您有两个选择，首先，您可以 return 来自 getter 的函数，或者，这在许多情况下更有意义，您可以只更改状态和 return 对象（或数组）：

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

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

根据我的经验，第二个选项通常是最好的，因为它对其他开发人员和维护来说更容易（return从 getter 中调用一个函数是非常违反直觉的）和因为它非常容易处理对象（或数组），但肯定第一个选项也有它的用例。

Answer 3

我们有办法将参数传递给 getters 函数这是你如何做的

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

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

将 key 传递给 vuex getter 以获得不同的状态

Pass key to vuex getter to get diferent state

vue.js

vuex