使用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)
    }
  }
})

然后我在我的state.contentBlocks上循环baseComponent.vue如下：

<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>的子组件中删除和更新。

我在get内使用变异的state.contentBlocks到BaseComponent.vue BaseComponent.vue：

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

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

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

但是DOM不玩球：

（!!）在上面，0和2的索引是正确的，但索引2中的内容是删除索引1（!!？）帮助的内容！ ：d

Answer 1

在baseComponent.vue中，使用computed属性循环内容块而不是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>