小开

最佳答案

让我重申几点，作为我接下来要说的话的借口

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

1)如果你的设计是

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

然后是 use fetch

2)如果你的设计是

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

然后是 use asyncData

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

我不认为使用 asyncData或 fetch有任何缺点

选择 asyncData还是 fetch完全取决于您的体系结构

NuxtJS > = 2.12的更新

答案中提到的几点不再适用于使用较新的 NuxtJS 版本(> = 2.12)。

在 NuxtJS 官方博客的这个邮寄中可以找到关于 asyncData和新 fetch之间的新行为和差异的一个很好的解释。

至于在两者之间做出选择，我认为最初的答案仍然适用:

我不认为使用 asyncData或 fetch有任何缺点

选择 asyncData还是 fetch完全取决于您的体系结构

小开

有一点我想说明，我没有看到上面提到(至少，不清楚)。 SyncData 会自动将数据合并到页面的 data ()对象中。Fetch 没有。通过提取，您可以随意处理数据。

小开

提取和异步数据在服务器端处理。

可以看出它们在使用方式上的不同:

A)获取: 更改存储数据

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

B) syncData: 更改上下文(组件数据)

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

小开

DR-对于渲染页面之前必须加载的内容使用 asyncData，对于其他内容使用 fetch。

主要区别:

可用性

asyncData只能在页面组件上使用
fetch可用于任何组件(包括页面组件)

装弹中

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

错误处理

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

小开

一号

由于 asyncData和 fetch的不同性质，在 asyncData-Nuxt 情况下有一个重要的优势，那就是在导航到下一个页面之前要等待异步数据挂钩完成。

从这里开始:

与提取不同的是，在路由转换期间解析异步数据钩子返回的承诺。这意味着在客户端转换期间不可见“加载占位符”(尽管可以使用加载条向用户指示加载状态)。相反，Nuxt 将在导航到下一个页面或显示错误页面之前等待异步数据挂钩完成)。

在实践中这意味着什么？

让我们假设你有下一个布局结构:

头
满足
福特

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

2号

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

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

<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。

获取钩子和下一个生命周期

Asyncdata 与费奇的区别

NuxtJS > = 2.12的更新

可用性

装弹中

错误处理

一号

2号

摘要