Capsuled data sharing with Vuex, axios & several component instances

问题

I have a component QuestionContainer.vue with several questions (input forms). Every user given answer (user input) is validated in realtime (@keyup.prevent="keyUpRoutine(questionkey)") unsing a method named keyUpRoutine(questionkey). If all answers are valid, I perform a consistecy check:

In 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()
}

Action in 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");

        });
}

The crux of the matter: The component QuestionContainer.vue might exist twice (regular and sometimes in modal div), so using Vuex states won't work because the states must be isulated in each component.

Is there a way, to return the new values of QuestionContainer.vue's questionState and capsule it in each component?

回答1:

I had a similar issue, where I had to store the state of multiple instances of the same component. So currently your mutations update single properties in the store. Instead of doing this, my approach is to create an array of objects for this state. For instance, you mutation should work like this: 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 })

来源：https://stackoverflow.com/questions/64842269/capsuled-data-sharing-with-vuex-axios-several-component-instances