javascript - 如何正确重置 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

引用官方 Vueland Discord 服务器：

“据我所知，响应式是我们用来从经典 API 进行响应式的旧方式，因此重置值应该类似于：”

const myData = reactive({
  foo: true,
  bar: ''
})

function resetValues () {
 myData.foo = true
 myData.bar = ''
}

因此，如果您不更改属性，您应该可以使用Object.assign(). （如我错了请纠正我）

Answer 3

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

  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 };
  }