Vuex, Axios 및 여러 컴포넌트 인스턴스와의 데이터 공유 제한

Vuex, Axios 및 여러 컴포넌트 인스턴스와의 데이터 공유 제한

컴포넌트가 있습니다.QuestionContainer.vue몇 가지 질문(입력 폼)이 있습니다.모든 사용자의 답변(사용자 입력)이 실시간으로 검증됩니다(@keyup.prevent="keyUpRoutine(questionkey)")라는 이름의 메서드의 서명을 해제합니다.keyUpRoutine(questionkey)모든 답변이 유효한 경우 일관성 검사를 수행합니다.

Question Container에 있습니다.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");

        });
}

문제의 핵심은 다음과 같습니다.컴포넌트는 2회 존재할 수 있으므로(정규적이거나 경우에 따라서는 modal div), Vuex 상태는 각 컴포넌트에 집약되어야 하므로 사용할 수 없습니다.

Question Container의 새로운 값을 반환하는 방법이 있습니까?vue의 질문각 컴포넌트에 기술하고 캡슐화합니다.

같은 컴포넌트의 여러 인스턴스 상태를 저장해야 하는 비슷한 문제가 있었습니다.그래서 현재 당신의 돌연변이는 스토어의 단일 속성을 업데이트합니다.이렇게 하는 것이 아니라 이 상태의 객체 배열을 만드는 방법입니다.예를 들어 변환은 다음과 같이 동작해야 합니다.App.js

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

스토어/스테이트js

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

저장/판매합니다.js

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

질문 컨테이너표시하다

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

언급URL : https://stackoverflow.com/questions/64842269/capsuled-data-sharing-with-vuex-axios-several-component-instances