在上一篇文章中我们介绍了如何封装一个表格操作hooks，这次介绍表单的操作。在业务开发中，经常会有各种各样的表单，而表单最基础的功能就是数据的添加和修改，同样的，它们的逻辑也都相似，传递参数->请求接口。因此，我们可以把这两个方法单独抽离出来。
src目录下新建useFormRequest.js文件
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
/**
* @description Form 表单操作方法封装
* @param {Function} emits 向父组件触发事件(必传)
* @param {String} tip 提示内容(非必传)
*/
export const useFormRequest = (emits, tip = {}) => {
const loading = ref(false);
const visible = ref(false);
/**
* @description Form 表单添加操作方法
* @param {Function} api 请求接口 api 方法(必传)
* @param {Object} params 表单数据(必传，默认为{})
*/
const add = async (api, params = {}) => {
loading.value = true;
const {
resultCode, msg,
} = await api(params).catch((e) => e);
loading.value = false;
if (resultCode === 0) {
ElMessage.success(`添加${tip}成功`);
visible.value = false;
emits('update');
} else if (msg) {
ElMessage.error(msg);
}
};
/**
* @description Form 表单修改操作方法
* @param {Function} api 请求接口 api 方法(必传)
* @param {Object} params 表单数据(必传，默认为{})
*/
const modify = async (api, params = {}) => {
loading.value = true;
const {
resultCode, msg,
} = await api(params).catch((e) => e);
loading.value = false;
if (resultCode === 0) {
ElMessage.success(`修改${tip}成功`);
emits('update');
visible.value = false;
} else if (msg) {
ElMessage.error(msg);
}
};
return {
loading,
visible,
add,
modify,
};
};
文件中我们定义了一个useFormRequest方法，传递两个参数，分别是事件触发器emits和请求提示(tip)。useFormRequest中定义了loading和visible变量，这让我们能直接在hooks中控制表单的显示关闭与按钮加载状态。add和modify分别对应表单的添加与修改功能，都是传入api和请求参数。
使用时，在对应的页面引入useFormRequest.js
import {
addCus, modifyCus
} from '@/api/modules/customer';
import { useFormRequest } from '@/hooks/useFormRequest';
const emits = defineEmits(['update']);
// 使用自定义表单hooks
const {
loading, visible, add, modify,
} = useFormRequest(emits, '客户');
在表单提交时，我们只需要几行代码代码就能搞定了
const submit = async () => {
formRef.value.validate((vali) => {
if (vali) {
id.value
? modify(modifyCus, {
id: id.value,
...model.value,
})
: add(addCus, model.value);
}
});
};
当然，我们还可以将获取表单详情的方法集成到hooks中，也是类似的逻辑，这里就不阐述了。
