与Vuex，axios&的共享数据封装几个组件实例 [英] Capsuled data sharing with Vuex, axios & several component instances

问题描述

我有一个 QuestionContainer.vue 组件，其中包含几个问题(输入表单).每个给定用户答案(用户输入)的用户都会使用名为 keyUpRoutine(questionkey)的方法进行实时验证( @ keyup.prevent ="keyUpRoutine(questionkey)" ).如果所有答案均有效，我将进行一致性检查:

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:

在QuestionContainer.vue中:

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

app.js中的操作:

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

        });
}

问题的症结所在:组件 QuestionContainer.vue 可能存在两次(常规且有时在模式div中)，因此使用Vuex状态将不起作用，因为状态必须在每个组件中进行隔离.

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.

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

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

推荐答案

我遇到了类似的问题，即我必须存储同一组件的多个实例的状态.因此，当前您的变异会更新商店中的单个属性.代替执行此操作，我的方法是为此状态创建一个对象数组.例如，您的突变应该像这样工作: App.js

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

这篇关于与Vuex，axios&的共享数据封装几个组件实例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！