用Vuex、axios封装数据共享&几个组件实例

Question

我有一个组件QuestionContainer.vue，有几个问题(输入表单)。每个用户给出的答案(用户输入)都在实时(@keyup.prevent="keyUpRoutine(questionkey)")中进行验证，取消一个名为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 })