与 Vuex、axios 和多个组件实例进行封装数据共享

Question

我有一个组件QuestionContainer.vue 有几个问题（输入表单）。使用名为 keyUpRoutine(questionkey) 的方法对每个用户给出的答案（用户输入）进行实时验证 (@keyup.prevent="keyUpRoutine(questionkey)")。如果所有答案都有效，我会执行一致性检查：

在 QuestionContainer.vue 中：

keyUpRoutine(questionkey) {

    var value = event.target.value;
    var question = this.questions[questionkey];

    question.validated = this.validate(question, value) ?  true : false;

    this.allConditioncomplied() 
        ? this.$store.dispatch("checkObligationConsistency", { someData })
        : this.questionState = 'default';
        // this.questionState must be changed by Vuex' action (app.js) checkObligationConsistency()
}

app.js 中的操作：

checkObligationConsistency(context, obligation) {
    context.commit("SET_OBLIGATION_STATE", "checking");
    axios
        .post("/DataCheck/checkObligationConsistency", obligation)
        .then(function(response) {

            context.commit("SET_OBLIGATION_STATE", "valid");
            
            if (store.state.modalType == "QuestionPack") {
                context.commit("SET_QUESTION_STATE", "add");
                // In QuestionContainer.vue, this.questionState must be set to 'add'
                // Incorrect approach: store.state.questionState = "add";
            } else {
                context.commit("SET_QUESTION_STATE", "submit");
                // In QuestionContainer.vue, this.questionState must be set to 'submit'                
                // Incorrect approach: store.state.questionState = "submit";
            }

        })
        .catch(function(error) {
            console.log(error);
            context.commit("SET_OBLIGATION_STATE", "invalid");

        });
}

问题的症结：组件QuestionContainer.vue可能存在两次（常规，有时在模态div中），因此使用Vuex状态将不起作用，因为必须在每个组件中隔离状态.

有没有办法返回 QuestionContainer.vue 的 questionState 的新值并将其封装在每个组件中？

Answer 1

我遇到了类似的问题，我必须存储同一组件的多个实例的状态。因此，目前您的突变会更新商店中的单个属性。我的方法不是这样做，而是为此状态创建一个对象数组。例如，你的突变应该像这样工作： App.js

context.commit("SET_OBLIGATION_STATE", {index: 0, value: "valid"});

store/state.js

// You can instantiate it with all your instances of this component or add them dynamically
{ obligationState: [ { value: "valid" } ] }

store/mutation.js

SET_OBLIGATION_STATE(state, payload) {
    Vue.set(state.obligationState, payload.index, payload.value)
},

QuestionContainer.vue

// You can pass here the index of your component instance and then 'checkObligationConsistency' action will know which instance state to update
this.$store.dispatch("checkObligationConsistency", { someData, index })