avue中增删改功能hook提取

最新推荐文章于 2025-12-11 16:09:33 发布

原创

最新推荐文章于 2025-12-11 16:09:33 发布 · 585 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #avue

文章介绍了如何在Vue应用中创建一个公共hooks，用于管理表格的增删改操作，通过CudOptions接口统一处理Axios请求的前后置逻辑，简化API调用并维护表格数据同步。

再avue使用中，我们会进场用到表格的增删改功能，我们写一个公共的hooks，然后只需要对请求的方法，参数的前后处理，就可以统一生成

import type {
   
    AxiosPromise } from "axios";
import type {
   
    Ref } from "vue";
import {
   
    ElMessageBox, ElMessage } from "element-plus";
import {
   
    cloneDeep } from "lodash-es";
import {
   
    error } from "console";
export interface CudOptions {
   
   
  cRequest: (...args) => AxiosPromise; //新增
  uRequest: (...args) => AxiosPromise; //更新
  dRequest: (...args) => AxiosPromise; //删除
  tableRequest: (...args) => AxiosPromise; // avue table onload 方法
  page: Ref<any>;
  // 前丶后置处理
  beforCReqFunc?: (row: any) => void;

  afterCReqFunc?: (row: any) => void;
  beforUReqFunc?: (row: any) => void;
  afterUReqFunc?: (row: any) => void