VUE3 之 HOOKS公共方法封装(TS)

场景：在项目开发过程中大概率会出现复用性方法，故为了节省代码量对公共方法进行抽象提取，将其封装为公共方法，以便于在不同组件中快速使用。

举例分页器方法提取：
src下新建hooks文件夹，新增ts文件：

文件内提取方法：

import { TABLE_PAGE } from '@/core/constants';
import { reactive, ref } from 'vue';

type sortParam = {
  field?: string | null;
  desc?: number | null;
};

export default function useSubTable(param: any) {
  const subPage = reactive({...TABLE_PAGE});
  const subQuery = reactive({} as sortParam);
  const subSearchParam: any = ref({});
  const subTableLoading = ref<boolean>(false);
  const subTableData = ref<any[]>([]);

  const getSubList = () => {
    if (param?.getSubList) {
      param.getSubList();
    }
  };

  const subChangePageSize = (size: number) => {
    subPage.pageSize = size;
    getSubList();
  };

  const subChangeCurrentPage = (pageNum: number) => {
    subPage.page = pageNum;
    getSubList();
  };

  const subChangeSort = (field: string, order: string) => {
    subQuery.field = field;
    subQuery.desc = order === 'asc' ? 0 : order === 'desc' ? 1 : null;
    getSubList();
  };

  const resetSubPage = () => {
    subPage.page = TABLE_PAGE.page;
    subPage.pageSize = TABLE_PAGE.pageSize;
    subPage.total = TABLE_PAGE.total;
    subQuery.field = null;
    subQuery.desc = null;
    subSearchParam.value = {};

    subTableData.value = [];
  };

  const subCommomSearch = () => {
    subChangeCurrentPage(1);
  };

  return {
    subPage,
    subQuery,
    subSearchParam,
    subChangePageSize,
    subChangeCurrentPage,
    subChangeSort,
    subCommomSearch,
    resetSubPage,
    subTableLoading,
    subTableData
  };
}

组件内使用：

import useSubTabel from "@/hooks/useSubTable";
//结构需要使用的方法
const {
  subPage,
  subSearchParam,
  subChangePageSize,
  subChangeCurrentPage,
  resetSubPage,
  subCommomSearch,
  subTableLoading,
  subTableData
} = useSubTabel({
  getSubList
});