Javascript 与Vuex、axios和；几个组件实例

我有一个组件

QuestionContainer.vue

，其中包含几个问题（输入表单）。使用名为

keyurutine（questionkey）

的方法，实时验证每个用户给出的答案（用户输入）（

@keyup.prevent=“keyurutine（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

可能存在两次（常规，有时在modal div中），因此使用Vuex状态将不起作用，因为必须在每个组件中计算状态

---

是否有方法返回QuestionContainer.vue的questionState的新值并将其封装到每个组件中？

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

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

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

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

store/state.js

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

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

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

store/mutation.js

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

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

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

---

注意，

state.obligationState[payload.index]=payload.value不会被Vue的反应性选中。改用
Vue.set（this.obligationState，payload.index，payload.value）
。@digitaldriver是的，我忘了提到这个。谢谢大家!@DigitalDriver实际上在VUEV3中，我认为它可能在没有Vue.set（）的情况下工作，因为反应系统是用代理重写的。你觉得呢，到目前为止你试过了吗？Thx@NikolayYankov！您的方法已导致成功：-）