nuxt3 使用useAsyncData发起post请求body传入的参数使用qs序列化报错

在 Nuxt.js 3 中，`useAsyncData` 是一个钩子，用于异步数据加载。当你尝试通过 `useAsyncData` 发起 POST 请求并将数据体 (`body`) 序列化为 URL 查询字符串 (query) 或 JSON 格式发送时，可能会遇到错误，因为通常 REST API 需要 body 被设置为 application/json 格式，而不是默认的 query 参数。

当你使用 `qs` 库序列化 JSON 对象作为 POST 请求的 body，这可能会导致错误，因为 Nuxt 的默认 Axios 实现会尝试将 body 解析为 URLSearchParams，而对非纯文本内容（如 JSON）无效。

解决这个问题的一种常见做法是：

1. **改变序列化方式**：在发起请求之前，手动转换 body 为 JSON 字符串：

import axios from 'axios'
import qs from 'qs'

export default async function usePostRequest(url, data) {
  const serializedData = await new Promise((resolve) => {
    resolve(JSON.stringify(data))
  })

  const response = await axios.post(url, { data: serializedData }, {
    headers: {
      'Content-Type': 'application/json',
    },
  })
  
  // ...处理响应
}

2. **直接设置 Content-Type**：

const response = await axios.post(url, data, {
  data,
  headers: {
    'Content-Type': 'application/json',
  },
})

或者如果你是在组件内部使用，可以这样：

this.$axios.post(url, { data }).then(response => {/*...*/})

在这个例子中，`$axios` 就会自动设置正确的 Content-Type。