Question

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

asyncData

您可能希望获取数据并在服务器端呈现它。 Nuxt.js   添加一个asyncData方法，允许您以前处理异步操作   设置组件数据。
     每次加载组件之前都会调用 asyncData （仅适用于   页面组件）。它可以从服务器端或之前调用   导航到相应的路线。这种方法收到了   context对象作为第一个参数，你可以用它来获取一些   数据并返回组件数据。

提取

fetch方法用于在呈现页面之前填充商店，它是   像asyncData方法一样，除了它没有设置组件数据。   如果设置了fetch方法，则每次加载之前都会调用fetch方法   组件（仅适用于页面组件）。它可以从中调用   服务器端或导航到相应路线之前。

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

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

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

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

感谢您的帮助。

Answer 1

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

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

1）如果你的设计是

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

然后use fetch

2）如果你的设计是

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

然后use asyncData

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

我发现使用asyncData或fetch

时没有任何弊端

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

Answer 2

我想指出的一点是，我没有看到上述内容（至少不清楚）。 asyncData自动将数据合并到页面的data（）对象中。提取没有。借助fetch，您可以根据需要自行处理数据。

Answer 3

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

主要区别：

可用性

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

正在加载

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

错误处理

如果在asyncData中抛出错误，则页面不会呈现
fetch公开了$fetchState.error属性，如何处理该属性由您决定

Answer 4

第一个

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

Taking from here：

<块引用>

与 fetch 不同，asyncData 钩子返回的 promise 在路由转换期间被解析。这意味着在客户端转换期间没有“加载占位符”可见（尽管加载栏可用于向用户指示加载状态）。 Nuxt 将在导航到下一页或显示错误页面之前等待 asyncData 钩子完成。

这对实践意味着什么？

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

标题
内容
页脚

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

第二个

我在 web 的不同地方看到，当你想在 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

Answer 5

I。 fetch和asyncData在服务器端进行处理。

II。可以看到使用它们的方式的不同：

a）提取：更改商店数据

(optional)

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

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

Asyncdata与Fetch

5 个答案:

可用性

正在加载

错误处理

第一个

第二个

总结