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挂钩只能用于页面组件。官方文档解释了如何解决这个问题：

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

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