NuxtJs asyncData 的用例是啥？

Posted 2023-02-23

【中文标题】NuxtJs asyncData 的用例是啥？

【英文标题】：what is the use case of NuxtJs asyncData?NuxtJs asyncData 的用例是什么？

【发布时间】：2020-02-06 00:18:14

【问题描述】：

据我所知，NuxtJs 页面中的 asyncData 函数在创建组件之前在服务器端呈现。以及当用户在页面加载后内部在页面之间导航时。 fetch 函数非常相似，但我们可以在其中设置数据到 store 并在路由更改时检查 store 中是否存在数据...

现在的问题是，我为什么要在页面刷新和路由更改中都向 API 发送请求？使用 fetch 函数并将数据存储在 vuex 存储中不是更好，这样就不需要进一步的 API 调用了吗？在asyncData 函数中获取需要什么样的数据？

例如，如果我想在服务器端渲染的应用程序中显示帖子列表，我认为最好的方法是使用 fetch 属性填充 vuex store ，然后在每次路由更改中我将数据保存在存储中，不需要 API 调用。

【参考方案1】：

该用例用于检索仅与特定页面相关的数据。

例如，您有几个端点返回有关特定动物的数据，/api/cats、/api/dogs、/api/birds。

当您在浏览器中加载 app.com/cats 时，asyncData 函数会从 /api/cats 获取数据并将其呈现到服务器端。

同样，对于 theapp.com/dogs，它会获取 /api/dogs。

如果有一个 /api/animals 端点包含一个提要中的所有动物数据（狗、猫和鸟），则用例会发生变化。

在这种情况下，您将执行一次检索，以使用类似nuxtServerInit 的所有页面数据填充存储

【讨论】：

谢谢 camaulay，我已经知道了。但问题是：每次发生路由更改（不刷新）时使用 asyncData ，数据会一次又一次地从 API 中获取，并且不会存储在 vuex 存储中......请仔细阅读我的问题

嘿艾哈迈德，这是 asyncData 的预期行为：“它将在服务器端调用一次（在对 Nuxt 应用程序的第一次请求时）和在导航到更多路由时在客户端调用。” - 您可以修改您的 asyncData 函数，以在从 API 获取之前检查存储是否已填充，并且仅在未填充存储时将 API 数据提交到存储。