Nuxt 获取嵌套组件，知道它们何时完成答案

【问题标题】：Nuxt fetch nested components knowing when they finishedNuxt 获取嵌套组件，知道它们何时完成
【发布时间】：2021-09-04 08:40:42
【问题描述】：

在页面组件中我有 fetch 并且我已经在我的嵌套组件中进行了 fetch，有没有办法知道所有组件何时完成它们的 fetch 以显示加载器，现在我在每个组件中发出 isInitialized 并使我的页面组件 v-show 为 false，直到我得到所有我所做的发出

【问题讨论】：

标签： nuxt.js

【解决方案1】：

不确定，但也许顶部的 $fetchState.pending 能够检测到每个嵌套组件都已完成获取。

在 cmets 上进行编辑。
this.$children 如果您将其放在按钮 @click 上可能会正常工作。同时，如果您打算在其他地方使用它，例如在生命周期挂钩中，它开始变得有点棘手。

这就是它的工作原理（参考：https://stackoverflow.com/a/44319825/8816585）：

如果您计划使用 mounted() 生命周期，使用 @hook:mounted 也很有帮助。

TL;DR：如您所见，这类事情处理起来相当棘手。

【讨论】：

但是如果我在 v-else 中的嵌套组件不会被渲染，那么在当前组件的获取发生之前不会进行获取
孩子在开始抓取之前需要先完成父抓取吗？
否则，您可以从父组件中获取子组件列表并检查子组件的获取状态。
是的，孩子需要完成父提取，我如何使用 ref 检查孩子的提取状态？
你可以去你的 vue devtools，点击一个组件，然后在你的控制台中，寻找$vm0.$children，这将列出你所有的组件。如果您选择带有$vm0.$children[13].$fetchState.pending 之类的特定组件，您将能够查看它是否有结束的fetch() 挂钩。所以，对于你的问题，你可以列出你父母的所有孩子，看看它是否有一个 fetch() 钩子，如果有，检查它是否完成。一些递归也应该能够提供帮助。另一种解决方案是让您的数据在全球范围内获取并以这种方式进行跟踪，这要容易得多。