在最近的网络应用程序中，我们有很多具有相同提交结构的表单：

1. 基于 isSubmitting 变量禁用表单和提交按钮
2. 验证输入字段（我们使用 Yup）
3. 如果验证失败：将 isSubmitting 设置回 false + 设置并在输入字段上显示 validationErrors
4. 如果验证成功：将带有表单数据的 post 请求发送到 api
5. 如果 api 关闭或返回错误，则显示一般错误

我尝试过使用 vue 3 中的组合 api 进行一些操作。

登录.vue

useForm.js

import { ref, watch } from 'vue';

export default function useForm(initialValues, validationSchema, callback) {
    let values = ref(initialValues);
    let isSubmitting = ref(false);
    let errors = ref({});

    async function handleSubmit() {
        try {
            errors.value = {};
            await validationSchema.validate(values.value, { abortEarly: false });
            isSubmitting.value = true;
        } catch (err) {
            console.log('In the catch');
            isSubmitting.value = false;

            err.inner.forEach((error) => {
                errors.value = { ...errors.value, [error.path]: error.message };
            });
        }
    }

    watch(isSubmitting, () => {
        if (Object.keys(errors.value).length === 0 && isSubmitting.value) {
            callback(values);
            isSubmitting.value = false;
        } else {
            isSubmitting.value = false;
        }
    });

    return { handleSubmit, isSubmitting, errors };
}

这在某种程度上有效，但我错过了两件事。在 useForm 中，我想等到回调完成（成功或失败）才能将 isSubmitting 设置回 false。承诺是做到这一点的好方法吗？还有更好的方法吗？其次，我想要一种可重用的方法来处理 Login.vue 中的错误。有什么建议如何处理这个问题吗？