react-query users, take a look: Form submission can be this easy?

Hey, my fellow front-end developers! Today, I want to share with you a super useful tool - the form submission strategy of alovajs. To be honest, this thing has really helped me a lot. Remember the tedious operations when handling token authentication before? Now, with this manager, everything has become so much simpler.

What is alovajs?

alovajs is a next-generation request tool. Unlike libraries like react-query and swrjs, alovajs provides a complete request solution. It can generate interface call code, TypeScript types, and interface documents with one click, greatly shortening the collaboration between front-end and back-end. Moreover, it also provides various high-quality request strategies to meet almost all specific request scenarios.

Want to know more about alovajs? You can check out the official website at https://alova.js.org, where you'll find more detailed introductions and documentation.

How to use the form submission strategy

Alright, let's take a look at how this form submission strategy works.

Basic usage

Here's a simple example of using the form submission feature:

const submitData = data => {
  return alovaInstance.Post('/api/submit', data);
};

<template>
  <input v-model="form.name" />
  <select v-model="form.cls">
    <option value="1">class 1</option>
    <option value="2">class 2</option>
    <option value="3">class 3</option>
  </select>
  <button @click="handleSubmit" :loading="submiting">Submit</button>
</template>

<script setup>
  import { formSubmit } from './api.js';
  import { useForm } from 'alova/client';

  const {
    loading: submiting,
    form,
    send: submit,
    onSuccess,
    onError,
    onComplete
  } = useForm(formData => formSubmit(formData), {
    initialForm: {
      name: '',
      cls: '1'
    }
  });

  const handleSubmit = () => {
    // Validate form data...
    submit();
  };
</script>

Auto-reset form after submission

Many times, we need to reset the form data after form submission. With useForm, this can be done automatically.

useForm(submitData, {
  resetAfterSubmiting: true
});

You can also manually reset the form data by calling the reset function.

const { reset } = useForm(submitData);

const handleReset = () => {
  reset();
};

Multi-page/multi-step forms

useForm also supports multi-page or multi-step forms. You can share the same form data across different pages or components.

const returnStates = useForm(submitData, {
  initialForm: {
    step1Input: '',
    step2Input: '',
    step3Input: ''
  },
  id: 'testForm'
});

By specifying the same id, the form data can be shared across components.

Conclusion

The form submission strategy of alovajs has really made our development work much easier. It not only simplifies the complex logic of form submission, but also provides features like form drafts, auto-reset, and multi-step forms. Most importantly, it makes our code cleaner and easier to maintain.

My fellow developers, have you encountered any problems with form submission in your projects? How do you think the form submission strategy of alovajs has solved these problems? Feel free to share your thoughts and experiences in the comments. Let's discuss and learn together!