계산된 데이터가 Vue에서 업데이트되지 않음

계산된 데이터가 Vue에서 업데이트되지 않음

저는 제 앱에 퀘이사 프레임워크와 vuex를 사용하고 있습니다.상위 구성 요소가 vuex 저장소의 데이터를 사용하여 하위 구성 요소를 렌더링하고 있습니다.하위 구성 요소는 편집 가능하며, 이 구성 요소에서 Enter 키를 누르면 저장소가 업데이트됩니다.그러나 상위 구성 요소의 계산된 속성이 업데이트되지 않습니다.내 코드는 다음과 같습니다.

모성분의가치관

<template>
<div>
    <div v-for="(object, objKey) in objects"
         :key="objKey">
        <new-comp
                :is=object.type
                :objId="object.id"
        ></new-comp>
    </div>
</div>
</template>

<script>
import ChildComponent from './child-component';

export default {
    name: 'ParentComponent',
    components: {
        ChildComponent
    },
    computed : {
        objects(){
            return this.$store.state.objects.objects;
        }
    },
    mounted() {
        this.assignEnterKey();
    },
    methods: {
        assignEnterKey() {
            window.addEventListener('keydown',function(e) {
                if(e.which === 13) {
                    e.preventDefault();
                }
            });
        }
    }
}

자분의가치관

<template>
  <div contenteditable="true" @keydown.enter="addChildComp" class="child-container">
    Tell your story
  </div>
</template>
<script>
export default {
    name: 'ChildComponent',
    props: ['objId'],
    data() {
        return {
            id: null
        }
    },
    computed : {
        serial(){
            return this.$store.state.objects.serial;
        }
    },
    methods: {
        addChildComp() {
            let newId = this.objId + 1;
            let newSerial = this.serial + 1;
            this.$store.commit('objects/updateObjs', {id: newId, serial: newSerial});
        }
    }
}

state.js

export default {
 serial: 1,
 objects: {
     1:
       {
       "id" : 1,
       "type" : "ChildComponent",
       "content" : ""
     }
 }
}

돌연변이제이에스

export const updateObjs = (state, payload) => {
  let id = payload.id;
  let serial = payload.serial;
  state.objects[serial] = {
    "id" : id ,
    "type" : "ChildComponent",
    "content" : ""
  };
 }

Vuex 돌연변이는 일반적인 Vue.js 반응성 규칙을 따르며, 이는 Vue.js 반응성 트랩이 Vuex 돌연변이에 적용될 수 있음을 의미합니다.

반응성을 유지하기 위해 속성을 추가할 때state.objects다음 중 하나를 수행해야 합니다.

• 특수 Vue를 사용합니다.방법 설정:

   Vue.set(state.objects, serial, { id, "type" : "ChildComponent", "content" : ""})
  

• 또는 재생성state.objects개체를 변환하는 대신:

   state.objects = { ...state.objects, [serial]: { id, "type" : "ChildComponent", "content" : ""} }
  

언급URL : https://stackoverflow.com/questions/54323839/computed-data-not-updating-in-vue