Asyncdata与Fetch之间的区别

Question

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

asyncData

您可能希望获取数据并在服务器端呈现它.Nuxt.js添加了一个asyncData方法,允许您在设置组件数据之前处理异步操作.

每次加载组件之前都会调用asyncData(仅适用于页面组件).它可以从服务器端调用,也可以在导航到相应的路由之前调用.此方法接收上下文对象作为第一个参数,您可以使用它来获取某些数据并返回组件数据.

---

取

fetch方法用于在呈现页面之前填充存储,它类似于asyncData方法,除了它不设置组件数据.每次加载组件之前都会调用fetch方法(如果已设置)(仅适用于页面组件).它可以从服务器端调用,也可以在导航到相应的路由之前调用.

fetch方法接收上下文对象作为第一个参数,我们可以使用它来获取一些数据并填充存储.要使fetch方法异步,返回一个Promise,nuxt.js将等待在呈现组件之前解析promise.

---

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

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

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

感谢帮助.

Answer 1

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

• asyncData 可以设置组件级别对象并访问vuex存储
• fetch 无法设置组件级别对象,但可以访问vuex存储
• 既asyncData&fetch将在服务器侧初始加载期间被触发
• 初始加载之后,asyncData并fetch调用相应的页面路由时,将被触发

1)如果你的设计是

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

然后 use fetch

2)如果你的设计是

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

然后 use asyncData

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

我没有看到使用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，您可以随意处理数据。

Answer 4

第 1 次

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

从这里获取：

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

这对于练习来说意味着什么？

让我们想象一下您有下一个布局结构：

• 标头
• 内容
• 页脚

如果在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>

概括

1. 如果您有一些重要数据（对用户可见或对用户不可见，但需要进行某些隐藏计算） - 使用asyncData.

2. 如果您想查看包含所有信息的页面（例如，当您有页眉 + 内容 + 页脚时） - 使用asyncData.

3. 如果您有一些数据可以稍后加载，请使用fetch。

Fetch Hook 和 Nuxt 生命周期

Answer 5

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

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

a) fetch：更改存储数据

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

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

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