如何正确重置 Vue Composition Api 的反应值

Question

我想知道我应该如何在 vuejs 设置中重置反应？（我知道如果将其更改为 ref 并使用 view.value 将解决此问题，但使用反应式应该有一个答案）

Answer 1

您可以使用Object.assign：

  setup() {
    const initialState = {
      name: "",
      lastName: "",
      email: ""
    };

    const form = reactive({ ...initialState });

    function resetForm() {
      Object.assign(form, initialState);
    }

    function setForm() {
      Object.assign(form, {
        name: "John",
        lastName: "Doe",
        email: "john@doe.com"
      });
    }

    return { form, setForm, resetForm };
  }

在代码沙盒上实时查看

学分：取自这里

Answer 2

Object.assign不适合我。（也许是因为我在 Nuxtjs 2 中为 Composition API 使用了垫片？）对于遇到同样问题的任何人：我必须使用紧凑循环。

  setup() {
    const initialState = {
      name: "",
      lastName: "",
      email: ""
    };

    const form = reactive({ ...initialState });

    function resetForm() {
        for (const [key, value] of Object.entries(initialState)) {
          form[key] = value
        }
    }

    function setForm(values = {name: "John", lastName: "Doe", email: "john@doe.com"}) {
        // only loop with the supported keys of initial state
        for (const key of Object.keys(initialState)) {
          form[key] = values[key]
        }
    }

    return { form, setForm, resetForm };
  }