Vuejs - vuex 计算属性，DOM 不更新

Posted 2023-02-22

【中文标题】Vuejs - vuex 计算属性，DOM 不更新

【英文标题】：Vuejs - vuex computed property, DOM not updating

【发布时间】：2019-07-14 16:36:17

【问题描述】：

所以我的一个组件中有以下代码：

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 为 this.$store.state.section.loading 返回 true。所以出于某种原因，Vue 没有在实际的 DOM 中加载 == true 。任何帮助将不胜感激。

【参考方案1】：

你需要return来自计算属性方法的值：

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

【讨论】：

天啊！这么小的错误。谢谢你看到这个

@janedoe 如果它解决了您的问题，您应该接受答案

是的，它没有让我，说我不得不等一下。无论如何它现在被接受了