Asyncdata 与 Fetch 之间的区别

Question

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

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

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

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

感谢您的帮助。

Answer 1

让我re-iterate几点作为我要说的借口

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

1) 如果你的设计是

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

然后 use fetch

2) 如果你的设计是

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

然后 use asyncData

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

我没有发现使用 asyncData 或 fetch

有任何缺点

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

NuxtJS 更新 >= 2.12

答案中提到的几点在使用较新的 NuxtJS 版本时不再适用 (>= 2.12). Official RFC announcement here.

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

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

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

Choosing asyncData or fetch totally depends on your architecture

Answer 2

有一点我想说一下，我没有看到上面提到的（至少，不是很清楚）。 asyncData 自动将数据合并到页面的 data() 对象中。获取没有。使用 fetch，您可以随心所欲地处理数据。

Answer 3

我。 fetch 和 asyncData 在服务器端处理。

二．可以看出使用方式的不同：

a) 获取：更改存储数据

<script>
export default {
  async fetch ({ store, params }) {
    await store.dispatch('GET_STARS');
  }
}
</script>

b) asyncData：更改上下文（组件数据）

<script>
export default {
  asyncData (context) {
    return { project: 'nuxt' }
  }
}
</script>

Answer 4

TL;DR - 将 asyncData 用于呈现页面之前必须加载的内容，将 fetch 用于其他所有内容。

主要区别：

可用性

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

正在加载

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

错误处理

如果在 asyncData 中抛出错误，则页面不会呈现
fetch 公开了一个 $fetchState.error 属性并且如何处理它取决于你

Answer 5

第一名

由于 asyncData 和 fetch 的不同性质，在 asyncData 的情况下有一个重要的优势 - Nuxt 在导航到下一个之前等待 asyncData 钩子完成页。

Taking from here:

Unlike fetch, the promise returned by the asyncData hook is resolved during route transition. This means that no "loading placeholder" is visible during client-side transitions (although the loading bar can be used to indicate a loading state to the user). Nuxt will instead wait for the asyncData hook to be finished before navigating to the next page or display the error page).

练习是什么意思？

假设您有下一个布局结构：

页眉
内容
页脚

如果使用 fetch 打开新页面，您可能会在几秒钟内看到页眉和页脚（因为内容数据正在下载）。在使用 asyncData 的情况下，您可以避免这个问题，并看到一个包含页眉 + 内容 + 页脚的新页面（但是这种方法的缺点是您需要等待同样的几秒钟才能下载内容数据）。

第二名

我在网络的不同地方看到，当你想在 vuex 中存储一些东西时，你需要使用 fetch - 这是不正确的。

在下面的代码中（取自我的项目），您可以找到 asyncData 和 fetch 的实现，它们都将数据存储到 vuex 中。

<script>
import { mapActions, mapMutations, mapState } from 'vuex'

export default {
  name: 'PagesBlog',

  async asyncData ({ store }) {
    if (!store.state.global.blogAuthors.length) {
      store.commit('global/blogAuthorsSet', await blogAuthorsDownload())
    }

    await store.dispatch('global/blogsDownloadAndSet')
  },

  async fetch () {
    if (!this.blogAuthors.length) {
      this.blogAuthorsSet(await blogAuthorsDownload())
    }

    await this.blogsDownloadAndSet()
  },

  computed: {
    ...mapState('global', [
      'blogAuthors'
    ])
  },

  methods: {
    ...mapActions('global', [
      'blogsDownloadAndSet'
    ]),

    ...mapMutations('global', [
      'blogAuthorsSet'
    ])
  }
</script>

总结

如果您有一些重要数据（用户可见或不可见，但需要进行某些隐藏计算）- 使用 asyncData.
如果您想查看包含所有信息的页面（例如，当您有页眉 + 内容 + 页脚时）- 使用 asyncData.
如果您有一些数据可以稍后加载 - 使用 fetch.

Fetch Hook and Nuxt Lifecycle

Asyncdata 与 Fetch 之间的区别

Difference between Asyncdata vs Fetch

vue.js

vuex

vuejs2

nuxt.js

NuxtJS 更新 >= 2.12

可用性

正在加载

错误处理

第一名

第二名

总结