在Vuex中找到有关状态的最佳实践(不提交突变的函数)

时间:2018-07-26 19:07:09

标签: vue.js vuex

我没有找到任何与我的问题相近的东西,所以我决定在这里提问。

在Vuex中,我们有操作,变异,获取方法并存储自身。如果我们需要创建一个功能来检查存储中的某些内容是否满足特定条件,或者我们希望在不进行任何更改的情况下找到状态数据的特定内容,该怎么办?

让我们考虑一个例子。我们的商店中有一个名为“ house”的变量。它可以有多个楼层,在某些楼层上可以有复式公寓。我们想知道房子里有多少套复式公寓。因此,该功能应有权访问状态并应返回此类公寓的数量。如果需要在不同的组件中使用此功能,则需要将其放在全局范围内。

另一个要说明的例子。我们有相同的变量“ house”,我们需要知道房子是否是摩天大楼(例如,有100多个楼层)。因此,此函数是一个返回布尔值的谓词。

问题是:我们是否应该为此使用吸气剂或其他某种东西,例如某种全球性的帮助者?这种情况下的最佳做法是什么?为什么?请在回答中给出解释。

提前谢谢!

1 个答案:

答案 0 :(得分:1)

这是getter的确切角色。吸气剂是Vuex商店的一部分,用于根据商店状态计算数据,它是商店的计算属性。

这是状态和获取方法的几个例子

state: {
  houses: [
    {id: 0, floors: 10},
    {id: 1, floors: 20},
    {id: 2, floors: 100}
    {id: 3, floors: 400}
  ]
},

getters: {

  // you can have dummy one
  getHouses(state){
    return state.houses
  },

  // or you can get a specific one like so
  getHouseFilteredBySpecificFloor(state){
    return floors => state.houses.filter(house => house.floors === floors)
  },

  // or you can return boolean if you want
  doesThisHouseHaveMoreThan100Floor(state){
    return ({ id }) => state.houses[id].floors > 100
  }
}