数据获取
数据请求
nuxt3提供了4个获取的函数：
- useFetch
- useLazyFetch
- useAsyncData
- useLazyAsyncData
注意：这些函数都必须在setup或生命周期钩子中使用；
useAsyncData
用于获取数据，如下：
const { data } = await useAsyncData('count', () => $fetch('/api/count'))
完整定义如下：
const {
data: Ref<DataT>, // 返回的数据
pending: Ref<boolean>, // 数据加载状态
refresh: (force?: boolean) => Promise<void>, // 强制刷新函数，调用此函数用于刷新请求，例如：点击分页时
error?: any // 请求失败的错误信息
} = useAsyncData(
key: string, // 唯一的键确保数据请求能够正确并且不被重复；如果您不提供密钥，则会自动生成一个对实例的文件名和行号唯一的密钥。
fn: () => Object, // 返回数值的异步函数，即发送请求的函数，例如：fetch()
options?: {
lazy: boolean, // lazy - 是否在页面路由之后才请求数据，默认为false
server: boolean // server - 是否在服务端请求数据
}
)
useLazyAsyncData
useLazyAsyncData 是对 useAsyncData 的封装，但其lazy选项为true，即不会阻塞路由导航，这意味着需要在页面上处理data为null的情况，或给data设置一个默认值；
const { pending, data: count } = useLazyAsyncData('count', () => $fetch('/api/count'))
watch(count, (newCount) => {
//
})
useFetch
useFetch 是对 useAsyncData 的封装，但其自动生成key同时推断响应类型，用起来更简单：
const { data: count } = await useFetch('/api/count')
useLazyFetch
useLazyFetch是对 useAsyncData 的封装，但lazy选项为true，即不会阻塞路由导航，这意味着需要在页面上处理data为null的情况，或给data设置一个默认值；
const { pending, data: posts } = useLazyFetch('/api/posts')
watch(posts, (newPosts) => {
//
})
刷新数据
刷新数据用于在页面加载完成后再次以不同的查询参数来加载数据的情况，例如：选择分页、搜索等。
const page = ref(1);
const { data: users, pending, refresh, error } = await useFetch(() => `users?page=${page.value}&take=6`, { baseURL: config.API_BASE_URL });
function previous() {
page.value--;
refresh();
}
默认情况下，refresh()会取消任何待处理的请求，
refreshNuxtData
使useAsyncData、useLazyAsyncData、useFetch和useLazyFetch的缓存失效并触发refetch，如果要刷新当前页面所有数据获取，则可以使用此方法：
const { pending, data: count } = useLazyAsyncData('count', () => $fetch('/api/count'))
const refresh = () => refreshNuxtData('count')
clearNuxtData
删除页面中的缓存数据、错误状态，以及正在发生的请求。
最佳实践 - 只选取需要的数据
由于请求返回的数据会存储在页面的有效负载中；因此建议给请求返回数据瘦身，通过pick选项仅选取返回结果中指定的数据；
const { data: mountain } = await useFetch('/api/mountains/everest', {
pick: ['title', 'description']
})
上述pick表示，请求结果数据只返回 title 和 description；
