nuxt3 $fetch body传参怎么处理

在 Nuxt.js v3 中，`$fetch` 是由 `@nuxtjs/composition-api-fetch` 插件提供的一个基于 Vue3 Composition API 的异步数据获取方法，它可以用来发送 HTTP 请求。如果你需要将 `body` 参数传递给 `$fetch`，你可以直接作为第三个参数传递，因为它的第一个参数是 URL，第二个参数是配置对象，而第三个参数就是你需要发送的数据体。

以下是一个简单的示例：

import { ref, computed } from 'vue'
import { useFetch } from '@nuxtjs/composition-api-fetch'

export default {
  setup() {
    const apiUrl = ref('https://api.example.com/data') // API 地址
    const requestBody = ref({ key: 'value' }) // 请求体

    // 使用 $fetch，其中第三个参数是 body
    const fetchData = async () => {
      const response = await useFetch(apiUrl.value, {}, requestBody.value)
      // ... 处理返回结果
      return response
    }

    // 将 fetchData 作为一个计算属性返回，这样可以在模板中方便地调用
    const data = computed(async () => {
      try {
        return await fetchData()
      } catch (error) {
        console.error('Error fetching data:', error)
        return null
      }
    })

    return { data }
  },
}

在模板（如 `.vue` 文件）中，你可以像这样调用它：

<template>
  <button @click="getData">Fetch Data</button>
  <div v-if="data">{{ data }}</div> <!-- 省略错误处理 -->
</template>

<script>
// ...
</script>