javascript - Vuex 不对复杂对象使用react

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);
},

这在文档中明确提到。

When adding new properties to an Object, you should either:

• Use Vue.set(obj, 'newProp', 123), or
• Replace that Object with a fresh one. For example, using the object spread syntax we can write it like this:
  state.obj = { ...state.obj, newProp: 123 }