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) {
      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)
      Vue.delete(state.contentBlocks, index)
    }
  }
})

然后我在baseComponent.vue 中循环state.contentBlocks，如下所示：

<v-container pa-0 v-for="(contentBlock, index) in contentBlocks" v-bind:key="contentBlock.index">
  <component v-bind:is="contentBlock.blockComponent" v-bind:contentBlock="contentBlock"></component>
</v-container>

然后我通过添加、更新和删除内容块来改变state.contentBlocks。 （我从基础组件中添加块，从绑定到<component></component> 的子组件中删除和更新。

我在BaseComponent.vue 中使用get 突变的state.contentBlocks 到BaseComponent.vue：

computed: {
    contentBlocks: () => store.state.contentBlocks,
}

更新时，我在控制台中看到以下内容：

一切看起来都很好。然后我去删除索引 1 处的块，它在状态级别“工作”：

但是 DOM 并没有发挥作用：

(!!) 上面，0和2的索引是正确的，但是索引2的内容是被删除的索引1的内容（！！？）救命！ :D

Answer 1

在baseComponent.vue 中，使用计算属性来循环内容块而不是 vuex 存储的状态：

<v-container pa-0 v-for="(contentBlock, index) in blocks" v-bind:key="contentBlock.index">
  <component v-bind:is="contentBlock.blockComponent" v-bind:contentBlock="contentBlock"></component>
</v-container>

computed: {
  blocks () {
    return this.$store.getters['contentBlocks']
  }
}

您还需要将相应的 getter 添加到商店：

export default new Vuex.Store({
  state: {
    id: 0,
    contentBlocks: []
  },
  getters: {
    contentBlocks: (state) => state.contentBlocks 
  }
  mutations: {
    addContentBlock(state, contentBlock) {
      contentBlock.id = state.id
      state.contentBlocks.push(contentBlock)
      state.id += 1
    },
    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)
      Vue.delete(state.contentBlocks, index)
    }
  }
})

不相关，但您可以简单地将removeContentBlock 突变为：

state.contentBlocks = state.contentBlocks.filter({id} => id !== contentBlock.id)

更新

在component 元素上添加一个键：

<v-container pa-0 v-for="(contentBlock, index) in blocks" v-bind:key="contentBlock.index">
  <component v-bind:is="contentBlock.blockComponent" v-bind:contentBlock="contentBlock" :key="contentBlock.id"></component>
</v-container>