Nuxt3从入门到实战之数据获取

前言

上一篇写了组件自动导入，通过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'] 
})