Question

我列出了有分数的人。在状态下，我将它们列在一个数组中，该数组中的一项是“ scoreHistory”，它是一个对象数组，其中包含它们在不同时间点的得分。我想在不同的时间段（即-5天，-30天）中过滤此集合，所以我不只是看到总体得分，而是看到所有人在30天前从0开始的得分。

我（正在）工作。请参阅下面的代码：

filteredScores () {
  if(!this.people) {
    return
  }
  // Here I was trying to ensure there was a copy of the array created in order to not change the original array. I thought that might have been the problem.
  let allPeople = this.people.slice(0) // this.people comes from another computed property with a simple getter. Returns an array.

  let timeWindow = 30 //days
  const windowStart = moment().subtract(timeWindow,'days').toDate()

  for (const p of allPeople ) {
    let filteredScores = inf.scoreHistory.filter(score => moment(score.date.toDate()).isSameOrAfter(windowStart,'day'))

    p.scoreHistory=filteredScores
    //calculate new score
    p.score = inf.scoreHistory.reduce(function(sum,item) {
        return sum + item.voteScore
      },0)
  }
  return allInf
}

我希望它能返回给我一个新的数组，其中每个人的分数在指定的时间段内相加。看来可以了。问题在于它正在改变this.people从中读取的状态，即整个数据集。因此，一旦过滤，所有数据就消失了。我不知道如何在不使用vuex的情况下更改全局状态？

非常感谢您的帮助。

Answer 1

您的问题不是您要修改数组，而是要修改数组中的对象。您更改数组中每个项目的scoreHistory和score属性。您要做的是创建一个新数组（我建议使用map），其中每个项目都是现有项目的副本以及新的score属性。

filteredScores () {
  if(!this.people) {
    return
  }

  let timeWindow = 30 //days
  const windowStart = moment().subtract(timeWindow,'days').toDate()

  return this.people.map(p => {
    let filteredScores = p.scoreHistory.filter(score => moment(score.date.toDate()).isSameOrAfter(windowStart,'day'))

    //calculate new score
    let score = filteredScores.reduce(function(sum, item) {
      return sum + item.voteScore
    }, 0)

    // Create a new object containing all the properties of p and adding score
    return {
      ...p,
      score
    }
  }
})

没有vuex的Vue计算属性覆盖全局状态

1 个答案: