添加新对象替换旧对象的内容 - VueJS Store

Question

我正在使用以下代码将新对象插入数组 'items'。但问题是当我插入一个新对象时，它会替换之前添加的对象的内容。这样，即使添加的对象不同，也始终包含相同的对象。

听说是因为使用了 'push' 也通过了引用。我该如何解决这个问题是 VueJS

Store.js

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

Answer 1

改为使用spread operator、

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

是否不需要传播运算符，您可以这样做：

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

Answer 2

终于找到答案了。解决方案是'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)
    }
  }

添加新对象替换旧对象的内容 - VueJS Store

Adding new objects replaces content of old objects - VueJS Store

javascript

vue.js

vuejs2