Vue3+Pinia+Axios：无法从Store中POST动态对象数据

问题重现 #

静态参数的POST请求可正常运行：

async resetPassword(selector, token, password) {
  var params = new URLSearchParams()
  params.append('selector', selector)
  params.append('token', token)
  params.append('password', password)

  return axios.post(
    import.meta.env.VITE_API_URL + '/reset-password/confirm',
    params
  )
}

动态参数的POST请求在生产环境异常：

async submitDataValues() {
  const values = this.newData
  var params = new URLSearchParams()
  for (var k in values) {
    var val = values[k]
    if (isObject(val)) {
      val = JSON.stringify(Object.assign({}, val))
    }
    params.append(k, val)
  }

  if (
    values?.eventid == null &&
    this.eventId !== null &&
    this.eventId !== 'new'
  ) {
    params.append('eventid', this.eventId)
  }

  return await axios
    .post(import.meta.env.VITE_API_URL + '/event/' + this.dataContext, params)
    .then(async (response) => {
      //...
    })
}

异常现象：

• 生产环境中，this.newData控制台可见键值对，但for...in无法遍历，对象长度显示为0，无法访问或复制属性
• 本地开发环境完全正常

原因分析与修复方案 #

1. 响应式包装导致遍历异常 #

生产环境下Pinia会用Proxy深度包装状态对象，直接用for...in无法获取原始属性。需先剥离响应式包装：

// 方案一：解构生成普通对象
const values = { ...this.newData }

// 方案二：使用Vue的toRaw方法获取原始对象
import { toRaw } from 'vue'
const values = toRaw(this.newData)

2. URLSearchParams序列化兼容性问题 #

替换URLSearchParams的构建逻辑，直接传递普通对象让Axios自动处理序列化：

const values = { ...this.newData }

// 处理嵌套对象
Object.keys(values).forEach(k => {
  if (typeof values[k] === 'object' && values[k] !== null && !Array.isArray(values[k])) {
    values[k] = JSON.stringify(values[k])
  }
})

// 添加eventid参数
if (values.eventid == null && this.eventId !== null && this.eventId !== 'new') {
  values.eventid = this.eventId
}

// 直接传递对象，若API要求form-data则显式设置headers
return await axios.post(
  `${import.meta.env.VITE_API_URL}/event/${this.dataContext}`,
  values,
  { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }
)

3. 代码压缩导致isObject失效 #

生产环境代码压缩可能破坏自定义isObject函数，替换为原生类型判断：

// 替换原有的isObject判断逻辑
if (typeof val === 'object' && val !== null && !Array.isArray(val)) {
  val = JSON.stringify(val)
}

4. 异步状态未同步 #

若this.newData是表单异步更新的状态，生产环境可能存在状态延迟，提交前等待DOM更新：

import { nextTick } from 'vue'

async submitDataValues() {
  await nextTick() // 等待状态同步
  const values = { ...this.newData }
  // 后续逻辑...
}

验证建议 #

在生产环境添加调试日志，确认数据状态：

console.log('values 类型:', typeof values)
console.log('序列化后内容:', JSON.stringify(values))

通过日志判断是遍历问题还是序列化问题，针对性调整。

内容的提问来源于stack exchange，提问作者Harry Richards