Asyncdata 与 Fetch 的区别

Question

获取和异步数据之间的确切区别是什么。官方文档是这样说的：

异步数据

您可能想要获取数据并将其呈现在服务器端。 Nuxt.js 添加了一个 asyncData 方法，允许您在设置组件数据之前处理异步操作。

每次加载组件之前都会调用 asyncData （仅适用于页面组件）。它可以从服务器端调用，也可以在导航到相应的路由之前调用。该方法接收上下文对象作为第一个参数，您可以使用它来获取一些数据并返回组件数据。

---

拿来

fetch 方法用于在渲染页面之前填充存储，它类似于 asyncData 方法，只是它不设置组件数据。如果设置了 fetch 方法，则每次加载组件之前都会调用（仅适用于页面组件）。它可以从服务器端调用，也可以在导航到相应的路由之前调用。

fetch 方法接收上下文对象作为第一个参数，我们可以使用它来获取一些数据并填充存储。为了使 fetch 方法异步，返回一个 Promise，nuxt.js 将在渲染组件之前等待 promise 被解析。

---

Fetch 被用来用数据填充存储？但是在 asyncData 中，这也可以通过存储提交吗？我不明白为什么有两种方法。

这两种方法在初始加载时都在服务器端运行，之后当您浏览应用程序时它运行客户端。

有人可以解释一下使用这些方法的优势吗？

感谢帮助。

原文由 Yakalent 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

让我重申几点作为我要说的借口

• asyncData 可以设置组件级对象和访问vuex store
• fetch 无法设置组件级对象但可以访问 vuex 存储
• asyncData & fetch 都将在初始加载期间在服务器端触发
• 初始加载后，调用相应的页面路由时会触发 asyncData 和 fetch

1）如果你的设计是

• 使用 vuex store 作为中央存储库
• 从 vuex 存储访问整个应用程序的数据

然后 use fetch

2）如果你的设计是

• 使用 vuex store 作为中央存储库
• 具有设置组件级对象的选项
• 在特定路由中获取的数据仅由单个组件使用
• 需要灵活地获得 vuex 存储或设置组件级别对象的权限

然后 use asyncData

有人可以解释一下使用这些方法的优势吗？

我看不出使用 asyncData 或 fetch 有任何缺点

选择 asyncData 或 fetch 完全取决于您的架构

NuxtJS >= 2.12 的更新

使用较新的 NuxtJS 版本 (>= 2.12 ) 时，答案中提到的几点不再适用。官方 RFC 公告 在这里。

可以在 NuxtJS 官方博客的这篇 文章 中找到关于 asyncData 和新的 fetch 之间的新行为和差异的很好解释。

至于两者之间的选择，我相信原来的答案仍然适用：

我看不出使用 asyncData 或 fetch 有任何缺点

选择 asyncData 或 fetch 完全取决于您的架构

原文由 divine 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

TL;DR - 使用 asyncData 必须在渲染页面之前加载的内容，使用 fetch 其他所有内容。

主要区别：

可用性

• asyncData 仅在页面组件上可用
• fetch 可用于任何组件（包括页面组件）

正在加载

• asyncData 阻止页面转换，直到它解决。这意味着返回的数据属性保证在组件上可用。但这也意味着用户可能需要等待更长时间才能看到内容。
• fetch 暴露一个 $fetchState.pending 属性，这取决于你如何处理

错误处理

• 如果在 asyncData 页面不会呈现
• fetch 暴露一个 $fetchState.error 属性，如何处理由您决定

原文由 Tamlyn 发布，翻译遵循 CC BY-SA 4.0 许可协议