Nuxt3 API中使用useBody读取请求体原始值的疑问

问题原因 #

你遇到的情况是因为请求中传递的body包含了Vue响应式对象（ref/reactive），而非普通JavaScript对象。当useFetch序列化请求体时，会把响应式对象的内部私有属性（比如__v_isRef、_value）也一并发送，导致后端useBody接收到的是响应式对象的完整结构，而非原始参数值。

正确解决方式 #

不要直接传递响应式对象作为请求体，需要先将响应式对象转换为普通对象，推荐使用Vue官方提供的工具函数：

1. 处理单个ref变量 #

如果username和password是单独的ref变量，用unref()提取原始值：

const usernameRef = ref('john')
const passwordRef = ref('123')

useFetch('/api/login', { 
  method: 'post', 
  body: { 
    username: unref(usernameRef), 
    password: unref(passwordRef) 
  }, 
  initialCache: false 
})

2. 处理reactive对象 #

如果是一个reactive包裹的对象，用toRaw()获取原始对象：

const user = reactive({ username: 'john', password: '123' })

useFetch('/api/login', { 
  method: 'post', 
  body: toRaw(user), 
  initialCache: false 
})

不推荐的做法 #

虽然可以通过body.username._value读取值，但_value是Vue内部私有属性，后续版本可能会发生变化，依赖它会导致代码不稳定，因此不建议使用这种方式。

内容的提问来源于stack exchange，提问作者Simon Rosengren