对象数组-在Vue.js生态系统中更新对象的正确方法

Question

我不确定问题出在哪里，但是我将看看是否有人可以帮助我了解我的代码出了什么问题。

我正在利用Vuex存储来跟踪不断变化的某些状态。我这样做如下：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    id: 0,
    contentBlocks: []
  },
  mutations: {
    addContentBlock(state, contentBlock) {
      contentBlock.id = state.id
      state.contentBlocks.push(contentBlock)
      state.id += 1
    },
    updateContentBlock(state, contentBlock) {
      state.contentBlocks[contentBlock.id] = contentBlock
    },
    removeContentBlock(state, contentBlock) {
      state.contentBlocks.splice(state.contentBlocks.indexOf(contentBlock), 1);
    }
  }
})

创建和删除块似乎正常。

但是，在更新块时-出现了问题。我能解释出什么问题的唯一方法是显示contentBlocks实例的日志：

如您在上面的屏幕快照中看到的那样，已更新的对象实例（在上面的示例中为索引1）不太正确，它似乎不是Observer对象？

失败的行是：

state.contentBlocks[contentBlock.id] = contentBlock

所以，我想知道...这应该是什么？

更新：

根据以下答案，我有以下内容：

updateContentBlock(state, contentBlock) {
  const index = state.contentBlocks.findIndex(block => block.id === contentBlock.id)
  Vue.set(state.contentBlocks, index, contentBlock)
},
removeContentBlock(state, contentBlock) {
  const index = state.contentBlocks.findIndex(block => block.id === contentBlock.id)
  state.contentBlocks.splice(index, 1, contentBlock)
}

在我的商店中。但是，这并不是删除contentBlocks。

我尝试将建议的代码更改为：

state.contentBlocks.splice(index, 1)

但这会引起一些奇怪的行为。例如，我有索引为0、1和2的块...我进行了突变以删除索引0。所有看起来都很好-我仅在索引1和2处只有contentBlocks。但是它们带有从0到1的内容???

Answer 1

这是Vue对数组的反应性的限制。

See #2 of Why isn’t the DOM updating?

  

通过直接设置索引（例如arr[0] = val）或修改其length属性来修改Array时。同样，Vue.js无法获取这些更改。始终通过使用Array实例方法或完全替换它来修改数组。 Vue提供了一种方便的方法arr.$set(index, value)，它是arr.splice(index, 1, value)

的语法糖

您可以通过在模块中使用Vue.set或Array.splice来解决此问题：

import Vue from 'vue'

// find the block's index in the array
const index = state.contentBlocks.findIndex(block => block.id === contentBlock.id)

// using Vue.set
Vue.set(state.contentBlocks, index, contentBlock)

// using Array.splice
state.contentBlocks.splice(index, 1, contentBlock)