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

Posted 2023-03-16

【中文标题】在 vue 3 组合 API 中删除反应性对象上的代理

【英文标题】：Removing proxying on a Reactive Object in vue 3 composition API

【发布时间】：2022-01-03 00:49:51

【问题描述】：

我陷入了反应性问题。我正在使用 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 具有反应性，第二个是硬编码的 testArray 数组对象，它成功地在表格中添加了一行。我在第二个结构中需要它。我认为阅读 torefs() 会消除反应性的文档，但显然不会。任何关于如何发送我的 formArray 的非代理版本的建议都非常感谢。

【参考方案1】：

好的，这是有效的：

const formAsPlainObject = toRaw(form);

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