Adding new objects replaces content of old objects - VueJS Store

Question

I'm using the following code to insert a new object into the array 'items'. But the problem is when I insert a new object, it replaces the content of the object that is added just before. In such way, the always contains the same objects, even though added objects are different.

I heard it's due to using 'push' which also passes the reference. How can I fix this is VueJS

Store.js

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

Saurabh · Accepted Answer · 2017-03-05 17:13:18Z

2

instead use spread operator,

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

Is spread operator is not needed, you can just do:

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

edited Mar 5, 2017 at 17:13

answered Mar 5, 2017 at 17:12

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Saurabh Over a year ago

@GijoVarghese Possible to create a fiddle of this issue.

Saurabh Over a year ago

@GijoVarghese All add the code where you are commiting this mutation, may be you are pushing the same item again just by changing it's queue. I will update my answer to handle that case.

Gijo Varghese Over a year ago

Tried both, not working. The answer I posted is working. The objects are not same. I thoroughly checked

Gijo Varghese · Accepted Answer · 2017-03-05 17:16:01Z

1

Finally got the answer myself. The solution is 'stringify the object and parse it back, both using JSON'

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

answered Mar 5, 2017 at 17:16

Gijo Varghese

11.8k23 gold badges84 silver badges125 bronze badges

1 Comment

Saurabh Over a year ago

Use Object.assign as I have added in my answer.

Collectives™ on Stack Overflow

Adding new objects replaces content of old objects - VueJS Store

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related