javascript - 对象数组 - 在 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);
    }
  }
})

创建和删除 block 似乎工作正常。

然而，当更新一个 block 时——出了点问题。我可以解释问题所在的唯一方法是显示 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)

但这会导致一些奇怪的行为。例如，我有索引 block 0、1 和 2 ...我变异以删除索引 0。一切看起来都不错 - 我只剩下索引 1 和 2 处的 contentBlocks。然而，它们带有来自 0 和 1 的内容 ???

Answer 1

这是 Vue 对数组的 react 性的限制。

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

When you modify an Array by directly setting an index (e.g. arr[0] = val) or modifying its length property. Similarly, Vue.js cannot pickup these changes. Always modify arrays by using an Array instance method, or replacing it entirely. Vue provides a convenience method arr.$set(index, value) which is syntax sugar for 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)