Nuxt3学习总结（03）

defineEventHandler

defineEventHandler 是一个函数，用于定义可复用的事件处理器函数。

在 Vue 或 Nuxt.js 应用中，通常会定义一些事件处理器函数，以便在不同的组件中重复使用。这些处理器函数可能会接收一些参数，然后根据参数执行相应的逻辑。

使用 defineEventHandler 可以让我们更方便地定义和管理这些事件处理器函数。它接收两个参数：

• logic: 这是一个函数，用于定义事件处理器的逻辑。该函数接收一个参数，也就是事件对象（例如鼠标点击事件的 event 对象）。在该函数中，我们可以根据传入的参数执行相应的逻辑，然后返回一个结果（如 promise 或其他数据）。
• options: 这是一个可选的参数对象，用于配置该事件处理器函数的行为。它可以包含以下属性：
  • once: 如果该属性为 true，则该事件处理器函数只会执行一次。默认值为 false。
  • defer: 如果该属性为 true，则该事件处理器函数将在下一轮事件循环中执行。默认值为 false。

例如，我们可以使用 defineEventHandler 定义一个处理鼠标点击事件的函数：

import { defineEventHandler } from 'nuxt'

const handleClick = defineEventHandler((event) => {
  console.log('Clicked!', event)
  // 执行一些逻辑
})

然后我们就可以在任意组件中使用这个事件处理器函数，如下所示：

这样，我们就可以在多个组件中复用同一个事件处理器函数了。

服务端API

Nuxt 项目下~/server/api目录下的文件会被注册为服务端 API，并约定在这些文件中导出一个默认函数defineEventHandler(handler)，handler 中可以直接返回 JSON 数据或 Promise。

export default defineEventHandler((event) => {
  return {
    message: 'hello'
  }
})

创建一个 hello.vue

数据获取API

Nuxt提供了useFetch, useLazyFetch, useAsyncData和useLazyAsyncData来处理应用程序中的数据获取

1. useFetch: 该函数用于在组件实例创建时立即发起 HTTP 请求，并将结果绑定到当前组件的 fetchState 中。如果需要在组件实例创建时就获取一些数据并立即显示，可以使用该函数。

2. useLazyFetch: 该函数用于在组件实例创建后懒加载数据。它不会在组件实例创建时立即发起 HTTP 请求，而是在组件加载后才会发起请求。如果需要在组件加载后才获取数据，可以使用该函数。

3. useAsyncData: 该函数用于在组件实例创建时立即发起异步数据获取，并将结果绑定到当前组件的 asyncData 中。如果需要在组件实例创建时立即获取一些数据并将其绑定到 asyncData 中，可以使用该函数。

4. useLazyAsyncData: 该函数用于在组件实例创建后懒加载数据获取，将结果绑定到当前组件的 asyncData 中。它不会在组件实例创建时立即发起异步数据获取，而是在组件加载后才会发起请求。如果需要在组件加载后才获取数据并将其绑定到 asyncData 中，可以使用该函数。

这些函数都是基于 Vue 3.x 的 setup() 函数提供的，用于在组件实例创建后进行异步数据获取和更新。每个函数都提供了不同的用例场景，可以根据具体的需求来选择使用哪个函数。