How to reset all values to initial state in vue3

Question

In vue2, we can use Object.assign(this.$data, this.$options.data()) to reset all values

But how can we do the same thing (one line coding) in vue3, assuming my setup() is ....

setup(props, context) {
  let a = ref('value1')
  let b = ref('value2')
  let c = ref('value3')
  
  function reset() {
    Object.assign(????, ????) or ???? <-- ????
  }
}

Estus Flask · Accepted Answer · 2021-07-09 07:14:02Z

8

Object.assign(this.$data, this.$options.data()) is a workaround that relies on options API internals.

It's a good practice to have reusable function for scenarios where initial state needs to be accessed more than once:

const getInitialData = () => ({ a: 1, ... });

It can be called both in data and setup.

Component state or its part can be expressed as single object. In this case it's handled the same way as Vue 2 state:

const formData = reactive(getInitialData());
...
Object.assign(formData, getInitialData());

Otherwise a.value, etc need to be assigned with respective initial values, either manually or with helper function:

let data = getInitialData();
for (let [key, ref] of Object.entries({ a, b, ... }))  
  ref.value = data[key];

answered Jul 9, 2021 at 7:14

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to reset all values to initial state in vue3

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related