vuex 변환이 DOM을 업데이트하지 않음

vuex 변환이 DOM을 업데이트하지 않음

개체를 기준으로 목록을 렌더링하고 있습니다.돌연변이를 통해 이 물체에 새로운 요소들을 추가하고 있습니다.내가 이걸 기록할 때.$store.state.myObject to console, 업데이트 중임을 알 수 있습니다.그러나 내 목록은 업데이트되지 않았습니다.

사실 저는 운이 좋아서 제 돌연변이에 아래의 코드 행을 추가하여 이 문제를 해결했습니다.(DOM 업데이트에 도움이 된다는 것을 알게 되었습니다.)

하지만 이것이 좋은 해결책인지 알고 싶습니다.

state.realms = Object.assign({}, state.realms)

여기 내 모든 돌연변이가 있다.

addToRealms: (state, val) => {
        var id = val.id
        var realmName = val.name.en_US
        state.realms[id] = { name: realmName }
        state.realms = Object.assign({}, state.realms)
        }

그리고 여기 제 vue 페이지 코드가 있습니다.

<q-btn flat
  v-for="(realm,code) in realms"
  :key="code"
  @click="selectRealm(realm)"
  :label="realm.name"
  clickable/>

영역(rem)을 계산된 속성으로 정의했습니다.

computed: {
realms () {
  return this.$store.state.realms
}

상세 정보:vue.js devtools 확장을 사용하고 있는데, vuex 스토어에서 커밋을 추적하면 상태가 실제로 변화하고 있음을 알 수 있습니다.하지만 바로 영향을 주지는 않습니다.commit all 버튼을 누르면 목록이 업데이트됩니다.

감사합니다.

사용할 때

state.realms = Object.assign({}, state.realms)

기본적으로 이전 개체를 기반으로 새 개체를 다시 만듭니다(네스트된 개체가 없는 경우 참조를 끊습니다). 따라서 목록이 업데이트됩니다.

딥 클론 및 브레이크 레퍼런스에 대한 자세한 내용은 이 기사를 참조하십시오.

Object.assign() 메서드는 하나 이상의 소스 개체에서 대상 개체로 열거 가능한 모든 자체 속성 값을 복사하기 위해 사용됩니다.

개체에 새 속성을 추가할 때 이러한 속성은 반응하지 않습니다.이들을 반응시키려면 Vue.set() 메서드(여기서는 docs)를 사용합니다.

Vue.set(state.realms[id],'name', realmName);

언급URL : https://stackoverflow.com/questions/62774359/vuex-mutation-doesnt-update-dom