前言
上一篇写了组件自动导入，通过nuxt的组件系统，我们使用组件时不需要导入和注册组件，用就完了，开发体验杠杠的！但我突然想到，我们平时开发还需要用到第三方组件库，那么组件库能自动导入吗？
相关的文档参见：http://v3.nuxtjs.org/docs/directory-structure/components#library-authors
所以如果严格按照nuxt要求定义我们组件库并添加nuxt.js文件，自动引入自然没有问题。然而在我尝试的两个组件库：vue-devui和naive-ui中，都不是很贴合它的要求，所以均以失败告终！希望有识之士可以折腾一下，如果你有解决方案，还请不吝赐教！
那么如何引入它们哪？其实通过插件体系获取
app实例就能手动注册，所以这并不是大问题。
本篇我们写一写组件逻辑，首先想到的是获取数据。
nuxt3中提供的数据获取函数有以下四个：
- useFetch
- useLazyFetch
- useAsyncData
- useLazyAsyncData
注意：它们都必须在
setup或生命周期钩子中使用
useAsyncData
在页面、组件或插件中都可以使用useAsyncData获取那些异步数据。比如：
const {
data: Ref<DataT>, // 返回的数据
pending: Ref<boolean>, // 加载状态指示器
refresh: (force?: boolean) => Promise<void>, // 强制刷新函数
error?: any // 请求失败的错误信息
} = useAsyncData(
key: string,// 唯一键用于多次请求结果去重
fn: () => Object,// 返回数值的异步函数
// lazy - 是否在路由之后才请求数据，server - 是否在服务端请求数据
options?: { lazy: boolean, server: boolean }
)
获取待办事项数据，index.vue：
<template>
<div>
<!-- 待办列表 -->
<div v-for="todo in todos" :key="todo.id">
<input type="checkbox" v-model="todo.completed">
<strong>{{todo.title}}</strong>
</div>
</div>
</template>
<script setup lang="ts">
const { data: todos } = await useAsyncData(
'count', () => $fetch('/api/todos'))
</script>
$fetch使用参考ohmyfetch
useLazyAsyncData
该方法等效于useAsyncData，仅仅设置了lazy选项为true，也就是它不会阻塞路由导航，这意味着我们需要处理data为null的情况（或者通过default选购给data设置一个默认值）
useFetch
页面、组件或者插件中可以使用useFetch获取任意URL资源。
useFetch是对useAsyncData包装，自动生成key同时推断响应类型，用起来更简单。
看下面方法签名，基本完全相同：
const {
data: Ref<DataT>,
pending: Ref<boolean>,
refresh: (force?: boolean) => Promise<void>,
error?: any
} = useFetch(url: string, options?)
useLazyFetch
该方法等效于useFetch，仅设置了lazy选项为true，所以它不会阻塞路由导航，这意味着我们需要处理data为null的情况（或者通过default选购给data设置一个默认值）
最佳实践
只选取需要的数据
由于请求回来的数据会存储在页面payload中，甚至包括那些没有用到的字段，所以文档中明确建议大家只选择那些组件用到的数据，我们可以设置$fetch的pick选项。
比如，下面的用法：
const { data: mountain } = await useFetch('/api/mountains/everest', {
pick: ['title', 'description']
})
网友评论