When you add new objects to VueJS Store, they are simply substituted for the existing objects

Question

When you add new objects to VueJS Store, they are simply substituted for the existing objects

Currently, I am encountering an issue with the code snippet below that is used to insert a new object into the 'items' array. The problem lies in the fact that whenever a new object is added, it ends up replacing the content of the previously added object. As a result, the 'items' array always contains the same objects, despite individual differences of the added objects.

I have come to understand that this behavior is likely caused by using the 'push' method which passes the reference. How can I address this issue within VueJS?

Store.js

var store = new Vuex.Store({
  state: {
    value: 1,
    quote: {
      items: [],
      something: ''
    }
  },
  mutations: {
    ADD (state, item) {
      state.quote.items.push(item)
    }
  }
})

javascript vuejs2 vue.js

Answer 1

Answer №1

It is recommended to utilize the spread operator instead.

mutations: {
  ADD (state, item) {
    state.quote.items = [...state.quote.items, Object.assign({}, item)]
  }
}

If you prefer not to use the spread operator, an alternative approach would be:

mutations: {
  ADD (state, item) {
    state.quote.items.push(Object.assign({}, item))
  }
}

Answer 2

It is recommended to utilize the spread operator instead.

mutations: {
  ADD (state, item) {
    state.quote.items = [...state.quote.items, Object.assign({}, item)]
  }
}

If you prefer not to use the spread operator, an alternative approach would be:

mutations: {
  ADD (state, item) {
    state.quote.items.push(Object.assign({}, item))
  }
}

Answer 3

Answer №2

After some trial and error, I discovered the solution on my own. To resolve the issue, you need to 'convert the object into a string and then parse it back using JSON'


mutations: {
    ADD (state, item) {
      item = JSON.stringify(item)
      item = JSON.parse(item)
      state.quote.items.push(item)
    }
}

Answer 4

After some trial and error, I discovered the solution on my own. To resolve the issue, you need to 'convert the object into a string and then parse it back using JSON'


mutations: {
    ADD (state, item) {
      item = JSON.stringify(item)
      item = JSON.parse(item)
      state.quote.items.push(item)
    }
}

When you add new objects to VueJS Store, they are simply substituted for the existing objects

Answer №1

Answer №2

Similar questions

Angular sending information from one page and retrieving it on another

Guide to creating a nested table with JavaScript

Tips for entering Tamil characters in text boxes on a form field

Having difficulty utilizing the $.each() function to assign properties to an object

What are the benefits of using CouchDB for login functionality, but encountering an empty CouchDB session while utilizing Vue.js and P

JSPM encountered an issue with installation from GitHub (404 error), but it is able to successfully install packages from npm

The Ultimate Slider: Highlighting Custom Navigation Link as Active While Navigating with Arrows

Creating an animated background slide presentation

Changing a string into a dictionary using Javascript

What is the technique for accessing dynamic object properties in Javascript?

Resolve the infinite loop issue in Vue.js

Deciding on the optimal times to implement data structure methods within Vue.js applications

Using Javascript to attach <head> elements can be accomplished with the .innerHTML property, however, it does not work with XML child nodes

Tips for updating CSS styles for multiple innerHTML elements using a JavaScript for loop

What is the process for creating a downloadable link or button?

Click on the input to add or remove a value

Adjust a Javascript script to choose the best font color for use in R Shiny applications

Next.js - utilizing dynamic API routes within nested folders

The code for populating the lookup does not perform as expected on the initial attempt

Utilizing the splice method across multiple instances of a string