Nuxt3提供了4种方式使得我们可以异步获取数据
useAsyncData
useLazyAsyncData (useAsyncData+lazy:true)
useFetch
useLazyFetch (useFetch+lazy:true)
4种方式中,其实核心的就是useAsyncData和useFetch。这两个方法不同于Nuxt2中的asyncData和fetch。接下来我们先来好好分析下这两个方法。
useAsyncData
我们知道,在Nuxt2中,asyncData方法类似于一个生命周期函数,它在服务端或路由更新之前被调用。方法的参数是当前页面的上下文对象,我们一般是利用 asyncData方法来获取数据并返回给当前组件,以避免请求放在客户端执行时带来的数据延迟出现问题。
exportdefault {
data() {
return { project: 'default' }
},
asyncData(context) {
return { project: 'nuxt' }
}
}
复制代码
在Nuxt3中,useAsyncData可以看做是异步获取数据场景的一个封装,而且变成了一个主动调用函数,原则上可以在任何时机调用。
// 用法const {
data: Ref<DataT>,// 返回的数据结果pending: Ref<boolean>,// 是否在请求状态中r