vue3 Hooks 函数封装思想 useTable

1.什么是Hooks

1.一系列已use作为开头的方法，它们提供了可以完全避开class写法，在函数组件中完成生命周期 状态管理 逻辑复用等几乎全部的组件开发工作能力

2.Hooks最核心的价值来着内部的状态管理

3. 在vue3中，hooks的概念结合了vue的响应系统，被称为组合函数，组合函数是vue3组合式API中提供的新的逻辑复用方案，是一类理由vue的组合式API来封装和复用有状态的逻辑函数

2. 封装一个hooks useTable

这是一个基于element表格的hooks 具有请求表格数据 传递请求参数 分页 搜索 重置等功能

/**
 * @description table 页面表格操作方法封装
 * @param {Function} api 获取表格数据 api 方法(必传)
 * @param {Object} initParam 获取数据初始化参数(非必传，默认为{})
 * @param {Boolean} isPageable 是否有分页(非必传，默认为true)
 * @param {Boolean} isAuto 是否自动请求(非必传，默认为true)
 * */
export const useTable = (
  api: any,
  initParam: any = {},
  isPageable: boolean = true,
  isAuto: boolean = true
) => {
  const state = ref<any>({
    // 表格数据
    tableData: [],
    // 分页数据
    pagination: {
      // 当前页数
      pageIndex: 1,
      // 每页显示条数
      pageSize: 10,
      // 总页数
      total: 0,
    },
    // 查询参数(只包括查询)
    searchParam: {},
    // 初始化默认的查询参数
    searchInitParam: {},
    // 总参数(包含分页和查询参数)
    totalParam: {},
    // 是否加载中
    loading: false,
    // 接口返回的所有内容
    responseData: null,
  });
  onMounted(() => {
    !!isAuto && reset();
  });
  // 调用接口获取表格数据
  const getTableData = async () => {
    try {
      //合并查询参数
      Object.assign(
        state.value.totalParam,
        isPageable
          ? {
              pageIndex: state.value.pagination.pageIndex,
              pageSize: state.value.pagination.pageSize,
            }
          : {},
        initParam
      );
      state.value.loading = true;
      let data = await api(state.value.totalParam);

      if (data.code !== 200) {
        return;
      }
      state.value.responseData = data;
      const { total } = data.result; // 拿到总页数
      // 根据是否分页，进行赋值
      state.value.tableData = isPageable ? data.result.records : [];
      // 对分页参数进行更新
      isPageable &&
        updatePagination({
          pageIndex: state.value.pagination.pageIndex,
          pageSize: state.value.pagination.pageSize,
          total,
        });
    } catch (err) {
      console.log(err);
    } finally {
      state.value.loading = false;
    }
  };
  // 更新分页参数
  const updatePagination = (resPageable: any) => {
    Object.assign(state.value.pagination, resPageable);
  };
  // 更新总参数
  const updatedTotalParam = () => {
    state.value.totalParam = {};
    // 处理查询参数，可以给查询参数加自定义前缀操作
    const nowSearchParam: any = {};
    // 防止手动清空输入框携带参数（这里可以自定义查询参数前缀）
    for (const key in state.value.searchParam) {
      // * 某些情况下参数为 false/0 也应该携带参数
      if (
        state.value.searchParam[key] ||
        state.value.searchParam[key] === false ||
        state.value.searchParam[key] === 0
      ) {
        nowSearchParam[key] = state.value.searchParam[key];
      }
    }
    Object.assign(
      state.value.totalParam,
      nowSearchParam,
      isPageable
        ? {
            pageIndex: state.value.pagination.pageIndex,
            pageSize: state.value.pagination.pageSize,
          }
        : {}
    );
  };
  // 查询方法
  const search = async () => {
    await getTableData();
  };

  // 重置方法
  const reset = async () => {
    state.value.pagination.pageIndex = 1;
    state.value.pagination.pageSize = 10;
    updatedTotalParam();
    // 重置搜索表单的时，如果有默认搜索参数，则重置默认的搜索参数
    Object.keys(state.value.searchInitParam).forEach((key) => {
      state.value.searchParam[key] = state.value.searchInitParam[key];
    });
    await search();
  };

  // 更新每页条数
  const handleSizeChange = async (val: number) => {
    state.value.pagination.pageIndex = 1;
    state.value.pagination.pageSize = val;
    await getTableData();
  };
  // 更新当前页
  const handleCurrentChange = async (val: number) => {
    state.value.pagination.pageIndex = val;
    await getTableData();
  };
  return {
    state,
    getTableData,
    handleCurrentChange,
    handleSizeChange,
    search,
    reset,
  };
};

3.使用这个hooks useTable 

# 导入useTable
import { useTable } from "@/shared/hooks/useTable.ts";

# 实例化
# plantListRequest 是封装的请求表格数据接口
# tableScreen 是默认参数(可为空)
# state 当前表格的全部状态数据
# handleCurrentChange
# handleSizeChange 这两个是分页处理方法
# search 这个是搜索方法 
# reset 这个是重置方法 全部参数初始化
const { state, handleCurrentChange, handleSizeChange, search, reset } =
  useTable(plantListRequest, tableScreen.value);