项目中的封装思想

一. 用高阶函数hooks封装请求

以处理请求和分页器为例：

//hooks  用高阶函数统一管理请求和分页
// 统一处理table的数据和请求处理
import { ref, reactive, unref } from "vue";
import type { Ref } from "vue";

// api 必传： 比如 api.admin.getAdminList
// queryParams 可选 : 比如  api.admin.getAdminList需要的参数 如 :keyword pageNum , pageSize
function useTable<
  P,
  R extends {
    list: any;
    pageNum: number;
    pageSize: number;
    total: number;
    totalPage: number;
  }
>(api: (data?: P) => Promise<R>, queryParams?: P) {
  // 分页器
  let pagination = reactive({
    pageNum: 1,
    pageSize: 5,
    total: 0,
    totalPage: 0,
  });
  // 获取data的列表数据
  let tableData: Ref<R["list"]> = ref([]);
  async function getTableData() {
    // console.log(queryParams); // 传过来的queryParams 已经变成 ref 类型
    // 定义一个普通的对象 ，遍历queryParams并将每一个key和value赋值给这个对象，得到一个新对象
    let normalQueryParams = {} as P;
    if (typeof queryParams === "object") {
      for (let key in queryParams) {
        // console.log(key);
        // console.log(unref(queryParams[key]));
        // unref 可以直接将响应式转为普通数据
        normalQueryParams[key] = unref(queryParams[key]);
      }
    }
    // console.log("...",{...normalQueryParams});
    // 发请求
    let result = await api({
      pageNum: pagination.pageNum,
      pageSize: pagination.pageSize,
      ...normalQueryParams,
    });
    // console.log(result);
    tableData.value = result.list;
    pagination.pageNum = result.pageNum;
    pagination.pageSize = result.pageSize;
    pagination.total = result.total;
    pagination.totalPage = result.totalPage;
  }
  getTableData();
  // 每页条数发生变化时的处理
  let handleSizeChange = (val: number) => {
    // console.log(val);
    pagination.pageSize = val;
    getTableData();
  };
  // 改变当前页数的处理
  let handleCurrentChange = (val: number) => {
    pagination.pageNum = val;
    getTableData();
  };
  return {
    getTableData,
    tableData,
    pagination,
    handleSizeChange,
    handleCurrentChange,
  };
}

export default useTable;

外部调用传参：

let { tableData, getTableData } = useTable(xxxapi, { keyword: iptval.value })

 

二. 封装工具类函数

以处理时间格式为例：

// 我们自己项目当中需要的工具  函数
// 有一个函数 将时间对象 格式化
export const formalDate = (val: string | undefined) => {
  // 如果没有要转换的时间对象 就返回一个 空
  if (!val) {
    return "";
  }
  // 转换
  // 1. 需要将字符串 转为 Date 对象
  let date = new Date(val);
  // 2. 将年月日  时分秒 使用特殊的符号 分割
  date.setHours(date.getHours() + 8);
  return date.toJSON().replace('T',' ').replace('.000Z','');
};