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

Question

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

Answer 1

引用自 Vueland Discord 官方服务器：

"For what I know, reactive is the old way we use to do reactivity from the Classic API, so to reset the values should be something like:"

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

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

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

Answer 2

您可以使用 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 };
  }

See it live on codesandbox

学分：taken from here

Answer 3

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

Answer 4

使用 ref 而不是 reactive 怎么样？

const myData = ref({ xxx: 11 })

// ... After many operations on myData 

// resetData
myData.value = { xxx: 11 }

缺点是在脚本中使用需要加上.value。但是这个和vue模板中的reactive是一样的。

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

How to properly reset Vue Composition Api's reactive values

javascript

typescript

vuejs3

vue-composition-api