Asyncdata与Fetch的区别

Question

fetch数据和异步数据的确切区别是什么。官方文件规定如下：

asyncData 您可能希望获取数据并在服务器端呈现数据。Nuxt.js添加了一个asyncData方法，允许您在设置组件数据之前处理异步操作。 每次加载组件之前都会调用asyncData (仅用于页面组件)。它可以从服务器端调用，也可以在导航到相应路由之前调用.此方法接收上下文对象作为第一个参数，您可以使用它获取一些数据并返回组件数据。

提取 fetch方法用于在呈现页面之前填充存储，它类似于asyncData方法，只是它没有设置组件数据。在加载组件(仅用于页面组件)之前，每次都调用fetch方法(如果设置为set )。它可以从服务器端调用，也可以在导航到相应路由之前调用. fetch方法接收上下文对象作为第一个参数，我们可以使用它获取一些数据并填充存储。要使fetch方法异步，返回一个允诺，nuxt.js将在呈现组件之前等待解析承诺。

Fetch是用来用数据填充存储的吗？但在asyncData中，这是否也有可能提交一家商店呢？我不明白为什么有两种方法。

这两种方法都在初始负载上运行服务器端，之后当您在应用程序中导航时，它将运行客户端。

有人能解释一下使用这些方法优于其他方法的好处吗？

谢谢你帮忙。

Answer 1

让我再重复几点，作为我要说的借口

• asyncData可以设置组件级对象并访问vuex存储。
• fetch不能设置组件级对象，但可以访问vuex存储。
• 在初始负载期间，asyncData和fetch都将在服务器端触发。
• 初始加载后，当调用相应的页路由时，将触发asyncData和fetch。

1)如果您的设计是

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

然后是use fetch

2)如果您的设计是

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

然后是use asyncData

有人能解释一下使用这些方法优于其他方法的好处吗？

我不认为使用asyncData或fetch有什么缺点

选择asyncData或fetch完全取决于您的体系结构

更新NuxtJS >= 2.12

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

关于asyncData和新fetch之间的新行为和区别的一个很好的解释可以在帖子的NuxtJS官方博客中找到。

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

我不认为使用asyncData或fetch有什么缺点 选择asyncData或fetch完全取决于您的体系结构

Answer 2

TL;DR -使用asyncData处理必须在呈现页面之前加载的内容，其他所有内容都使用fetch。

主要区别：

可用性

• asyncData仅在页面组件上可用。
• fetch可用于任何组件(包括页面组件)

正在加载

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

错误处理

• 如果在asyncData中引发错误，则不会呈现页面。
• fetch公开一个$fetchState.error属性，这取决于您如何处理

Answer 3

有一点我想指出，我没有看到上面提到(至少，不清楚)。asyncData会自动将数据合并到页面的data()对象中。去取不去。使用fetch，这取决于您喜欢的数据。