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)
  // 执行一些逻辑
})

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

<template>
  <button @click="handleClick">Click me!</button>
</template>

<script>
import { handleClick } from '@/utils/eventHandlers'

export default {
  methods: {
    handleClick
  }
}
</script>

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

服务端API

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

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

创建一个 hello.vue

<template>
  <div>
    {{ message }}
  </div>
</template>

<script setup lang="ts">
const { message } = await $fetch('/api/hello')
</script>

数据获取API

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

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

   <template>
     <div>
       <h1>{{ name }}</h1>
       <p>{{ bio }}</p>
     </div>
   </template>
   
   <script>
   import { useFetch } from 'nuxt'
   
   export default {
     async setup() {
       const { data } = await useFetch(()=>'https://api.example.com/user')
       return { name: data.name, bio: data.bio }
     },
   }
   </script>
   

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

   <template>
     <div>
       <h1>{{ name }}</h1>
       <p>{{ bio }}</p>
     </div>
   </template>
   
   <script>
   import { useLazyFetch } from 'nuxt'
   
   export default {
     setup() {
       const { state, fetch } = useLazyFetch(() => $fetch('https://api.example.com/user'))
   
       if (state.loading) {
         return { name: 'Loading...', bio: '' }
       }
   
       if (state.error) {
         return { name: '', bio: 'Error occurred: ' + state.error.message }
       }
   
       return { name: state.data.name, bio: state.data.bio }
     },
   }
   </script>
   

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

   <template>
     <div>
       <h1>{{ name }}</h1>
       <p>{{ bio }}</p>
     </div>
   </template>
   
   <script>
   import { useAsyncData } from 'nuxt'
   
   export default {
     asyncData(ctx) {
       return useAsyncData(() => $fetch('https://api.example.com/user'))
     },
   }
   </script>
   

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

   <template>
     <div>
       <h1>{{ name }}</h1>
       <p>{{ bio }}</p>
     </div>
   </template>
   
   <script>
   import { useLazyAsyncData } from 'nuxt'
   
   export default {
     asyncData(ctx) {
       const { state, load } = useLazyAsyncData(() => ctx.$axios.$get('https://api.example.com/user'))
   
       if (state.loading) {
         return { name: 'Loading...', bio: '' }
       }
   
       if (state.error) {
         return { name: '', bio: 'Error occurred: ' + state.error.message }
       }
   
       return { name: state.data.name, bio: state.data.bio }
     },
   }
   </script>
   

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