How to properly reset Vue Composition Api's reactive values

When using Vue Composition API, correctly resetting reactive values is an important skill, especially when handling form and component states. Vue Composition API offers a more flexible approach to organizing and reusing logic compared to Vue 2.x's Options API, managing state through the setup() function and reactive references (e.g., ref and reactive).

Explaining how to reset reactive values through examples:

Assume we have a form that uses Vue Composition API for state management. We need to clear all input fields after the user submits the form or clicks the reset button. Here are the steps and example code to achieve this functionality:

Step 1: Define initial state

First, we define a function to initialize the form state. This allows us to reset the state conveniently, not only when the component first loads.

javascript
import { ref, reactive } from 'vue';

function useFormData() {
    const initialFormState = () => ({
        name: '',
        email: ''
    });

    const form = reactive(initialFormState());

    const resetForm = () => {
        const newInitialState = initialFormState();
        for (let key in newInitialState) {
            form[key] = newInitialState[key];
        }
    };

    return { form, resetForm };
}

Step 2: Use the state and reset function

Use this custom Composition function within your component's setup() function.

javascript
export default {
    setup() {
        const { form, resetForm } = useFormData();

        const submitForm = () => {
            // Handle form submission logic
            console.log('Form submitted:', form);
            resetForm();
        };

        return {
            form,
            submitForm,
            resetForm
        };
    }
}

Step 3: Bind in the template

Finally, bind the corresponding data and methods in the Vue component's template.

html
<template>
  <form @submit.prevent="submitForm">
    <input v-model="form.name" type="text" placeholder="Your Name" />
    <input v-model="form.email" type="email" placeholder="Your Email" />
    <button type="submit">Submit</button>
    <button type="button" @click="resetForm">Reset</button>
  </form>
</template>

Summary

By defining a function for initializing the state and re-invoking it when needed to update all properties in the reactive object, you can conveniently reset reactive values in Vue Composition API. This approach makes state management clearer and more maintainable.