programing

Vuejs - vuex 계산 속성, DOM이 업데이트되지 않음

luckcodes 2022. 7. 19. 22:37

Vuejs - vuex 계산 속성, DOM이 업데이트되지 않음

컴포넌트 중 하나에 다음 코드가 있습니다.

export default {
    name: 'section-details',
    components: {
        Loading
    },

    mounted() {
        if (!this.lists.length || !this.section_types.length) {
            this.$store.dispatch('section/fetch_section_form_data', () => {
                if (this.section) {
                    this.populate_form();
                }
            });
        }
        else if (this.section) {
            this.populate_form();
        }
    },
    computed: {
        section_types() {
            return this.$store.state.section.section_types;
        },
        lists() {
            return this.$store.state.list.lists;
        },
        loading() {
            console.log(this.$store.state.section.loading);
            this.$store.state.section.loading;
        }
    },
    .
    .
    .
}

보시다시피 Ajax 요청을 수행할 때 vuex 저장소에서 속성을 검색하는 "로드"를 위한 계산된 속성이 있습니다.

내 섹션 vuex 모듈에는 다음과 같은 내용이 있습니다.

    fetch_section_form_data({ commit }, callback) {
        commit("isLoading", true);
        sectionService
            .fetch_form_data()
            .then((data) => {
                commit("isLoading", false);
                commit("fetch_section_types_success", data.section_types);
                commit("list/fetch_lists_success", data.lists, { root: true});

                if (callback) {
                    callback();
                }
            })
            .catch((err) => {
                commit("isLoading", false);
            })
        ;
    }

모듈의 돌연변이에 다음과 같은 코드가 있습니다.

mutations: {

    isLoading(state, status) {
        state.loading = status;
    },
}

마지막으로 로딩 속성을 저장하는 컴포넌트에는 다음과 같은 기능이 있습니다.

<Loading v-if="loading"></Loading>

어쨌든 Loading 컴포넌트는 어떤 이유로 표시되지 않습니다.단, loading() 메서드의 console.log는 이에 대해 true를 반환합니다.$store.state.section.loading을 실행합니다.따라서 Vue가 실제 DOM에서 로드 == true를 인식하지 못하고 있습니다.어떤 도움이라도 주시면 감사하겠습니다.

할 필요가 있다return계산된 속성 방법의 값:

loading() {
    return this.$store.state.section.loading;
}

언급URL : https://stackoverflow.com/questions/54795641/vuejs-vuex-computed-property-dom-not-updating