Nuxt.js 页脚组件未执行代码以检索数据

Question

我们有一个 nuxt.js 应用程序，它从strapi 中检索数据。这适用于我们创建的所有其他页面，但是当我们尝试检索 <Footer /> 的数据时，代码似乎没有执行。

这是我们用于检索索引页面的代码：

export default {
   async asyncData({ $strapi }) {
      return {
        homepage: await $strapi.find("homepage"),
      };
   },
}

我们从一个页面到另一个页面更改的只是变量名称和它的发现值。 这适用于 10 - 12 页。

在主页上，我们可以使用以下代码检索页脚的数据：

export default {
   async asyncData({ $strapi }) {
      return {
        footer: await $strapi.find("footer")
      };
   },
}

但是，当我们将此代码放入页脚组件时，它似乎没有执行，因为视图资源管理器中没有显示任何变量，如果我们尝试从 {{footer}} 渲染任何内容，则会出现错误说我们引用了不存在的东西。

这段代码没有在页脚组件中执行有什么原因吗？

Answer 1

asyncData 挂钩只能用于页面组件。官方documentation 解释了如何解决此问题：

asyncData 仅适用于页面，您无法在钩子中访问它。

1. 使用 Nuxt 2.12 及更高版本中提供的新 fetch 挂钩。
2. 在挂载的挂钩中进行 API 调用，并在加载时设置数据属性。缺点：不适用于服务器端渲染。
3. 在页面组件的 asyncData 方法中进行 API 调用，并将数据作为 props 传递给子组件。服务器渲染将正常工作。缺点：页面的 asyncData 可能不太可读，因为它正在为其他组件加载数据。