Asyncdata 与 Fetch 之间的区别 [英] Difference between Asyncdata vs Fetch

问题描述

获取和异步数据之间的确切区别是什么.官方文档说明如下:

<块引用>

异步数据

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

asyncData 每次加载组件前都会被调用(仅适用于页面组件).可以在服务端或者之前调用导航到相应的路线.该方法接收上下文对象作为第一个参数，你可以用它来获取一些data 并返回组件数据.

---

<块引用>

获取

fetch 方法用于在渲染页面之前填充 store，它是类似于 asyncData 方法，只是它不设置组件数据.fetch 方法(如果设置)在每次加载之前调用组件(仅适用于页面组件).它可以从服务器端或导航到相应路由之前.

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

---

Fetch 是用来填充数据的吗?但是在 asyncData 中这也可以通过商店提交吗?我不明白为什么有两种方法.

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

有人可以向我解释使用这些方法的优势吗?

感谢您的帮助.

解决方案

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

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

1) 如果您的设计是

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

然后 使用 fetch

2) 如果您的设计是

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

然后 使用 asyncData

<块引用>

有人能解释一下上面使用这些方法的好处吗?其他?

我认为使用 asyncData 或 fetch

没有任何缺点

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

NuxtJS 更新 >= 2.12

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

可以在此 post 在 NuxtJS 官方博客中.

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

<块引用>

我认为使用 asyncData 或 fetch

没有任何缺点

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

What is the exact difference between fetch and async data. The official documentation says the following:

asyncData

You may want to fetch data and render it on the server-side. Nuxt.js adds an asyncData method that lets you handle async operations before setting the component data.

asyncData is called every time before loading the component (only for page components). It can be called from the server-side or before navigating to the corresponding route. This method receives the context object as the first argument, you can use it to fetch some data and return the component data.

---

Fetch

The fetch method is used to fill the store before rendering the page, it's like the asyncData method except it doesn't set the component data. The fetch method, if set, is called every time before loading the component (only for page components). It can be called from the server-side or before navigating to the corresponding route.

The fetch method receives the context object as the first argument, we can use it to fetch some data and fill the store. To make the fetch method asynchronous, return a Promise, nuxt.js will wait for the promise to be resolved before rendering the component.

---

Fetch is been used to fill the store with data? But in asyncData is this also possible to commit trough a store? I don't understand why there are two methods for.

Both methods are running server-side on the initial load, after that when you navigate through the applicatie it runs client side.

Can someone explain me the advantage of use these methods above the other?

Thanks for help.

解决方案

Let me re-iterate few points as a pretext to what i'm going to say

• asyncData can set component level objects and access vuex store
• fetch cannot set component level objects but has access to vuex store
• Both asyncData & fetch will be triggered in server side during initial load
• After initial load, asyncData and fetch will be triggered when the corresponding page routes are invoked

1) if your design is

• Use vuex store as a central repository
• Access data from the vuex store for the entire application

then use fetch

2) if your design is

• Use vuex store as a central repository
• Have options to set component level objects
• Data fetched in a particular route is used only by a single component
• Need flexibility to have permission to either vuex store or set component level object

then use asyncData

Can someone explain me the advantage of use these methods above the other?

i don't see any drawbacks in using asyncData or fetch

Choosing asyncData or fetch totally depends on your architecture

Update for NuxtJS >= 2.12

Several points mentioned in the answer no longer apply when using newer NuxtJS versions (>= 2.12). Official RFC announcement here.

A good explanation of the new behaviour and differences between asyncData and the new fetch can be found in this post in the NuxtJS official blog.

As for choosing between both, I believe the original answer still applies:

i don't see any drawbacks in using asyncData or fetch

Choosing asyncData or fetch totally depends on your architecture

这篇关于Asyncdata 与 Fetch 之间的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！