在Vue3中，如何将嵌套代理对象（反应式数据）转换为常规对象？

Question

I\xc2\xa0 有一个 pinia 商店，其中有一个用户对象。

\n

export const useStore = defineStore('store', {\n  state: () => ({\n    currentSlide: 1,\n    user: {},\n    data,\n  }),\n})\n

\n

vote I\xc2\xa0am 然后更新它以在用户对象内有一个数组

\n

然后投票数组有多个对象作为投票..所以 I\xc2\xa0 将数组作为 a ，user.vote然后采用这种格式[{vote:01},{vote:02}.{vote:3}]

\n

我\xc2\xa0需要将此数组推送到mongodb..但是当我\xc2\xa0尝试访问此数组时，因为它是反应数据，所以它是一个代理对象，其中包含多个代理对象。

\n

所以我尝试了toRaw(user.vote)（不确定这是否是正确的方法）并且数组不再是代理而是常规数组..但是它内部的对象（投票）仍然是代理对象..

\n

我如何\xc2\xa0从这个 pinia 结构中获取包含常规对象的常规数组以发送到 mongodb？

\n

Answer 1

打字稿版本：

import { isReactive, toRaw } from 'vue'

export function isObject (value: unknown): boolean {
  return value !== null && !Array.isArray(value) && typeof value === 'object'
}

export function getRawData<T>(data: T): T {
  return isReactive(data) ? toRaw(data) : data
}

export function toDeepRaw<T>(data: T): T {
  const rawData = getRawData<T>(data)

  for (const key in rawData) {
    const value = rawData[key]

    if (!isObject(value) && !Array.isArray(value)) {
      continue
    }

    rawData[key] = toDeepRaw<typeof value>(value)
  }

  return rawData // much better: structuredClone(rawData)
}

JavaScript 版本：

import { isReactive, toRaw } from 'vue'

export function isObject (value: unknown): boolean {
  return value !== null && !Array.isArray(value) && typeof value === 'object'
}

export function getRawData<T>(data: T): T {
  return isReactive(data) ? toRaw(data) : data
}

export function toDeepRaw<T>(data: T): T {
  const rawData = getRawData<T>(data)

  for (const key in rawData) {
    const value = rawData[key]

    if (!isObject(value) && !Array.isArray(value)) {
      continue
    }

    rawData[key] = toDeepRaw<typeof value>(value)
  }

  return rawData // much better: structuredClone(rawData)
}

使用 Nuxt.js 3，将文件中的这些帮助程序添加到utils/自动导入的文件夹中。