Vuex 不与复杂对象发生反应

Question

我开始使用 Vuex 来替换 EventBus，因为我的应用程序中的数据开始变得有点复杂。

在我的上下文中，我有一个问题实体，有多个答案，当用户插入另一个答案时，我想显示最后一个答案；（这里我使用两个不同的组件：一个用于显示答案，另一个用于回答问题）但是当服务器对新答案做出正确响应并且突变更改了 state.answers 时，计算属性不会做出反应并且不会' t 显示新答案：

这是我的数据结构：

"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，当我调用 this.$store.dispatch('saveAnswer',answer) 时，状态将被更新，计算属性答案将被更新，我将能够显示组件中的新更改，但它不起作用......计算属性只是没有反应。

我读了很多关于 vuex 以及如何“它不能很好地处理”复杂数据的内容，所以我规范了我的数据。但它是相同的...我也尝试使用 vuex-orm，但是一对多关系有很多问题，而且我无法正常工作。

编辑：解决方案

我根据答案中的想法做了一个小测试，它有效

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

Answer 1

当你使用对象时，你必须这样做

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

文档中明确提到了这一点。

向对象添加新属性时，您应该：

• 使用 Vue.set(obj, 'newProp', 123)，或者
• 将该对象替换为新对象。例如，使用对象扩展语法，我们可以这样写：
  state.obj = { ...state.obj, newProp: 123 }