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

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

我正在利用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的内容？

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

请参阅为什么不更新DOM的＃2？

通过直接设置索引（例如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)