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);
