Vuex가 복잡한 개체에 반응하지 않음

Vuex가 복잡한 개체에 반응하지 않음

Vuex를 사용하여 EventBus를 재배치했습니다.왜냐하면 앱의 데이터가 조금 복잡해지기 시작했기 때문입니다.

이 문맥에서는 질문 엔티티에 여러 개의 답변이 있습니다.사용자가 다른 답변을 삽입했을 때 마지막 답변을 표시합니다.여기서는 2개의 다른 컴포넌트를 사용합니다.하나의 컴포넌트를 사용하여 답변을 표시하고 다른 컴포넌트를 사용하여 질문에 응답합니다.단, 서버가 새로운 답변으로 OK로 응답하고 변환하여 상태가 변경되었을 때 계산된 속성은 변경되지 않습니다.반응하고 새로운 답을 표시하지 않습니다.

데이터 구조는 다음과 같습니다.

"answers": {
  "118": {
    "id": 118,
    "description": "objective",
    "created_at": "2019-11-12T19:12:36.015Z",
    "dojo_process_id": 1,
    "question_id": 1,
    "user_id": 10
  }
  "127": {
    "id": 127,
    "description": "asdddd",
    "created_at": "2019-11-12T19:38:19.233Z",
    "dojo_process_id": 1,
    "question_id": 1,
    "user_id": 10
  },
  "128": {
    "id": 128,
    "description": "asddddasddd",
    "created_at": "2019-11-12T20:00:17.572Z",
    "dojo_process_id": 1,
    "question_id": 1,
    "user_id": 10
  }
},

다음은 저희 가게의 코드입니다.

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);     

export const store = new Vuex.Store({
  state: {
    ...
    answers: {},
    ...
  },

  getters: {

    findBy: state=> filter => {
      let result= Object.values(state[filter.model]).
      filter(data => data[filter.field] === filter.criteria);
      return result;
    }
  },
  mutations: {

    setAnswers(state, answers) {
      state.answers = answers;
    },
    setAnswer(state, answer) {
      state.answers[answer.id] = answer;
    },

  },
  actions: {
    replaceCompleteProcess(context, data) {
      ...
      context.commit('setAnswers',data.answers);
      ...

    },
    cleanCompleteProcess(context) {
      ...
      context.commit('setAnswers',{});      
      ...
    },
    saveAnswer(context, answer) {
      context.commit('setAnswer', answer);
    }
  }
});

컴포넌트의 스크립트는 다음과 같이 구성되어 있습니다.

export default {
name: "show-question",
computed: {
  question: function () {
    return this.$store.getters.question(this.questionId)
  },
  answers: function () {
    return this.$store.getters.findBy({
      model: 'answers',
      field: 'question_id',
      criteria: this.questionId,
      sort: true
    });
  },
  answer: function () {
    if (this.answers && this.answers.length > 0) {
      return this.answers[0].description;
    } else {
      return '';
    }
  }
},
props: {
  questionId: {
    type: [Number],
    default: 0
  }
},
data() {
  return {
    sending: false,
    answerData: this.answer
  }
},
methods: {
  sendAnswer () {
    this.sending = true;
    questionConnector.answerQuestion(this,this.question.id,this.dojoProcessId, this.answerData)
  },

 // this one is called from AXIOS
  answerWasOK(answer) {
    this.sending = false;
    this.$store.dispatch('saveAnswer', answer);
    this.answerData = '';
  }
}

}

Vuex의 사용법을 이해하면 이렇게 부릅니다.$store.dispatch("saveAnswer", answer), 상태가 갱신되고 계산된 속성 답변이 갱신되며 컴포넌트의 새로운 변경을 표시할 수 있지만 동작하지 않습니다.계산된 성질이 반응하지 않습니다.

vuex에 대해 많이 읽고 복잡한 데이터에 대해 "잘 작동하지 않는다"고 해서 데이터를 정상화했습니다. 하지만 똑같습니다.또한 vuex-orm을 사용하려고 했지만 일대다 관계에 문제가 많아서 잘 되지 않습니다.

편집: 솔루션

답안지 아이디어로 간단한 테스트를 해봤는데 효과가 있었다.

setAnswer(state, answer) {
    let newAnswers = state.answers;
    state.answers = {};
    newAnswers[answer.id] = answer;
    state.answers = newAnswers;
}

오브젝트로 작업할 때는 이렇게 해야 합니다.

setAnswer(state, answer) {
    Vue.set(state.answers, answer.id, answer);
},

이것은 문서에 명확하게 기재되어 있습니다.

개체에 새 속성을 추가할 때 다음 중 하나를 수행해야 합니다.

• Vue.set 사용(obj, 'new Prop', 123) 또는
• 해당 개체를 새 개체로 바꿉니다.예를 들어 객체 확산 구문을 사용하면 다음과 같이 쓸 수 있습니다.
  state.obj = {...state.obj, newProp: 123 }

개체 내부에 답변 목록을 저장하고 있습니다.그건 문제될 게 없어, 넌 어떻게 대처해야 하는지 아니까.는 새로운 오브젝트 속성을 추적하지 않습니다(목록/어레이를 수정하는 대신 새로운 속성을 작성하는 작업).

첫 번째 제안은 이 개체를 배열로 변경하는 것입니다.그러나 ORM 또는 프로젝트 표준의 다른 이유로 할 수 없는 경우 다음 사항을 살펴봐야 합니다.ReactivityVue.js, a a, a a, 각 a, 각 a, 각 a, 제 a, . a, . a, . ., . ., . ., . . a, . a . .watcher:

https://vuejs.org/v2/api/ #워치

---

Vue.js의 반응성을 이해하는 데 도움이 되는 링크:

깊이에서의 반응성

https://vuejs.org/v2/guide/reactivity.html

개체 속성 변경을 능동적으로 추적하려면 어떻게 해야 합니까?

https://forum.vuejs.org/t/how-to-actively-track-an-object-property-change/34402/1

언급URL : https://stackoverflow.com/questions/59039029/vuex-doesnt-react-with-complex-object