vue.js - Asyncdata 与 Fetch 之间的区别

Question

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

asyncData

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

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

---

Fetch

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

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

---

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

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

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

感谢您的帮助。

Answer 1

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

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

1) 如果你的设计是

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

然后使用fetch

2) 如果您的设计是

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

然后使用asyncData

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

我没有看到使用 asyncData 或 fetch 有任何缺点

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

NuxtJS 更新 >= 2.12

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

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

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

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

Choosing asyncData or fetch totally depends on your architecture