nuxt3 如何使用useAsyncData发其请求并给列表赋值

在 Nuxt.js 3 中，`useAsyncData` 是官方提供的基于 Vue 3 的异步数据获取功能，主要用于在组件挂载时加载数据，并在数据准备好后更新组件的状态。以下是使用 `useAsyncData` 发送请求并给列表赋值的基本步骤：

1. 首先，在你的 `.vue` 文件或自定义组件内导入 `useAsyncData` 和相关的辅助函数，如 `asyncData` 或 `fetch`，它们通常位于 `@nuxtjs/composition-api` 或 `nuxt-composition-api` 这样的库中。

import { useAsyncData } from '@nuxtjs/composition-api'

2. 定义一个名为 `asyncData` 的方法，这是你放置异步数据获取的地方。在这个方法里，你可以发送 API 请求，并返回一个 Promise，该 Promise 解析为你想在组件内使用的数据对象，通常包含一个数组字段用于填充列表。

export default {
  setup() {
    const fetchData = async () => {
      try {
        // 假设我们有一个名为 'posts' 的 API 接口
        const response = await axios.get('/api/posts')
        return { posts: response.data }
      } catch (error) {
        console.error('Error fetching data:', error)
        return null
      }
    }

    // 使用 useAsyncData 返回一个 computed property 以及一个钩子
    const [data, loading] = useAsyncData(fetchData)

    return {
      posts: data.posts, // 这就是你的列表数据
      isLoading: loading, // 当数据正在加载时显示加载状态
    }
  },
}

3. 现在，你可以在模板中使用 `v-if` 或者 `v-loading` 组件来控制渲染和显示加载提示：

<template>
  <div v-if="!isLoading">
    <ul>
      <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
    </ul>
  </div>
  <LoadingComponent v-if="isLoading"></LoadingComponent>
</template>

<script>
// ... 在这里 import LoadingComponent 组件
</script>