오브젝트 배열 - 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) {
      state.contentBlocks[contentBlock.id] = contentBlock
    },
    removeContentBlock(state, contentBlock) {
      state.contentBlocks.splice(state.contentBlocks.indexOf(contentBlock), 1);
    }
  }
})

블록의 작성과 삭제는 정상적으로 동작하고 있는 것 같습니다.

단, 블록을 갱신할 때는 뭔가 문제가 있습니다.무엇이 잘못되었는지 설명할 수 있는 유일한 방법은 contentBlocks 인스턴스의 로그를 표시하는 것입니다.

위의 스크린샷에서 볼 수 있듯이 갱신된 오브젝트 인스턴스(위 예의 인덱스 1)는 정확하지 않습니다.Overserver 오브젝트는 아닌 것 같습니다.

실패하는 행은 다음과 같습니다.

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)

하지만 이것은 이상한 행동을 일으키고 있다.예를 들어, 지수 0, 1, 2의 블록이 있습니다.인덱스 0을 제거하기 위해 돌연변이를 합니다.모두 양호합니다.인덱스 1과 2의 contentBlocks만 남았습니다.단, 0과 1의 내용이 포함되어 있습니다.

이는 어레이에 대한 Vue의 반응성의 제한입니다.

DOM이 업데이트되지 않는 이유의 #2를 참조하십시오.

인덱스를 직접 설정하여 어레이를 수정하는 경우(예:arr[0] = val또는 길이 속성을 변경합니다.마찬가지로 Vue.js는 이러한 변경을 픽업할 수 없습니다.항상 어레이 인스턴스 방식을 사용하거나 완전히 교체하여 어레이를 수정하십시오.Vue는 편리한 방법을 제공합니다.arr.$set(index, value)이것은 에 대한 구문설탕이다.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)

언급URL : https://stackoverflow.com/questions/52132321/array-of-objects-correct-way-of-updating-an-object-within-the-vue-js-ecosystem