Question

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

https://www.npmjs.com/package/redis-utils-cli

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

See it live on codesandbox

积分：taken from here

Answer 2

从Vueland Discord官方服务器上引用：

“据我所知，反应式是我们用于从Classic API进行反应性的旧方法，因此重置值应类似于：”

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

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

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

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

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

3 个答案: