删除 vue 3 组合中反应对象的代理 API

Question

我被反应性问题困住了。我正在使用 Stein 在 google 表中创建后端。 Stein 非常讲究，想要 [{}] 格式的请求。我做了以下事情：

模板：

 <div class="field">
                <label class="label">Model #</label>
                <div class="control">
                  <input
                    class="input"
                    placeholder="Model #"
                    v-model="form.ModelNum"
                  />
                </div>
              </div>

              <div class="field">
                <label class="label">Bar Code</label>
                <div class="control">
                  <input
                    class="input"
                    placeholder="Bar Code"
                    v-model="form.Barcode"
                  />
                </div>
              </div>

              <div class="field">
                <label class="label">Serial #</label>
                <div class="control">
                  <input
                    class="input"
                    placeholder="Serial #"
                    v-model="form.SerialNum"
                  />
                </div>
              </div>
            //etc

JS

\<script setup>
import { reactive, defineEmits, toRefs } from "vue";
import addRow from "../helperFunctions/addRow.js";

// Variables
let form = reactive({
  Equipment: "",
  Make: "",
  ModelNum: "",
  Barcode: "",
  SerialNum: "",
  Location: "",
  Condition: "",
});

const formArray = [];

const submitForm = function () {
  const formAsPlainObject = toRefs(form);
  formArray.push(formAsPlainObject);
  console.log(formArray);
  console.log(testArray);

  addRow(testArray);
};

问题是 formArray[] 对象仍然被代理，这导致 Stein 失败。任何人都有办法完全去除代理。请参阅下面的开发工具。

顶部 console.log 是 w/reactivity，第二个是硬编码的 testArray 数组对象，它成功地在表格中添加了一行。我在第二个结构中需要它。我认为阅读 torefs() 的文档会去除反应性，但显然不会。非常感谢有关如何发送我的 formArray 的非代理版本的任何建议。

Answer 1

好的，这是有效的方法：

const formAsPlainObject = toRaw(form);

toRaw() 函数删除对象上的代理。

删除 vue 3 组合中反应对象的代理 API

Removing proxying on a Reactive Object in vue 3 composition API

vuejs3

vue-composition-api

vue-reactivity