Leveraging Vue computed properties to update local state without the need for Vuex

Question

Leveraging Vue computed properties to update local state without the need for Vuex

I need help with filtering a list of people's scores based on different time periods. Each person has a 'scoreHistory' array containing their scores at various points in time, and I want to see the total score for each person starting from 0 say 30 days ago.

My current code is partially working, but it seems to be altering the original data set instead of creating a new filtered version. Here is my code snippet:

filteredScores () {
  if(!this.people) {
    return
  }
  
  let allPeople = this.people.slice(0)
  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
    
    p.score = inf.scoreHistory.reduce(function(sum,item) {
        return sum + item.voteScore
      },0)
  }
  return allInf
}

Although the function calculates the total scores correctly, it seems to be modifying the global state instead of creating a new one. Can someone guide me on how to prevent this unintended alteration?

Thank you for any assistance provided.

javascript vue.js vuex

Answer 1

Answer №1

The issue at hand is not the modification of the array, but rather the modification of the objects within it. By altering the scoreHistory and score properties of each item in the array, you are affecting the original data. A better approach would be to create a new array using the map method, where each item consists of a copy of the existing object along with an additional score property.

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 totalScore = filteredScores.reduce(function(sum, item) {
      return sum + item.voteScore
    }, 0)

    // Create a new object containing all the properties of p with an added score property
    return {
      ...p,
      totalScore
    }
  }
})

Answer 2

The issue at hand is not the modification of the array, but rather the modification of the objects within it. By altering the scoreHistory and score properties of each item in the array, you are affecting the original data. A better approach would be to create a new array using the map method, where each item consists of a copy of the existing object along with an additional score property.

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 totalScore = filteredScores.reduce(function(sum, item) {
      return sum + item.voteScore
    }, 0)

    // Create a new object containing all the properties of p with an added score property
    return {
      ...p,
      totalScore
    }
  }
})

Leveraging Vue computed properties to update local state without the need for Vuex

Answer №1

Similar questions

In configuring the print settings, I specified margins to ensure proper formatting. However, I noticed that the margin adjustment only applies to the first page. I need

Converting Node JS request to an API into React Fetch syntax

Embedding links in v-bind:href

Is it considered proper to initialize an empty array within the data object of a Vue.js component?

Steps for adjusting button size in Sencha Touch

How to use AngularJS to collapse various panels with unique content

Avoid having Masonry load all divs simultaneously

Autofill class names in VS Code for Next.js using Emmet

When the user clicks on the login text field or password field, any existing text will

What is the proper method for submitting a mail form via AJAX without using jQuery?

Query CSS to target an empty array within the .data() method

How about creating a customized sorting algorithm from the ground up that incorporates a comparator?

The Object filter is experiencing a delay with processing 10,000 items

Is it possible to automatically close the modal by clicking outside of it

Utilizing environment variables in Vue.js and Azure DevOps for seamless integration

Generating a new display div element using an anchor link

Tanstack onMutate Callback Fails to Activate Modal on React State Update

How can the ID of a table row be retrieved if it is selected?

"Encountering issues with toggle effect in nested divs when utilizing an Angular Directive -

Timer malfunctioning and failing to count down