Проблема с вычисленным состоянием и измененным состоянием с 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>.

I get мутировал state.contentBlocks до BaseComponent.vue, используя в течение BaseComponent.vue:

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

При обновлении в консоли вижу следующее:

Все выглядит хорошо. Затем я иду, чтобы удалить блок с индексом 1, который «работает» на уровне состояния:

Но DOM не играет в мяч:

(!!) В приведенном выше примере индексы 0 и 2 являются правильными, в зависимости от необходимости, но содержание в индексе 2 соответствует содержимому удаленного индекса 1 (!!?) Help! : 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']
  }
}

Вам также необходимо добавить соответствующий геттер в магазин:

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>