Vuejs - vuex 计算属性,DOM 不更新
Posted
技术标签:
【中文标题】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 如果它解决了您的问题,您应该接受答案 是的,它没有让我,说我不得不等一下。无论如何它现在被接受了以上是关于Vuejs - vuex 计算属性,DOM 不更新的主要内容,如果未能解决你的问题,请参考以下文章