Vue.js를 사용한 계산 상태 및 변환 상태 문제

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) {
      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 getstate.contentBlocks로로 합니다.BaseComponent.vue'에서의 사용BaseComponent.vue:

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

업데이트 시 콘솔에 다음 항목이 표시됩니다.

모든 게 좋아 보인다.그런 다음 상태 수준에서 "작동"하는 인덱스 1의 블록을 삭제합니다.

하지만 DOM은 공놀이를 하지 않습니다.

(!) 상기에서는 필요에 따라 0과 2의 인덱스는 맞지만 인덱스 2의 내용은 삭제된 인덱스 1의 내용(!?)입니다.도와주세요!d

»baseComponent.vue스토어 vuex " " 스x , 。

<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>

언급URL : https://stackoverflow.com/questions/52132878/issue-with-computed-state-and-mutated-state-with-vue-js