当类型差不多的页面可以使用该hook完成接口请求

@/hooks/useQueryParams.js

/**
 * 获取列表数据
 * @param {*} fetchDataFun 列表请求接口方法
 * @param {*} query 请求的额外参数
 * @param {*} immediate 是否立即请求
 * @returns 
 */
export default function useQueryParms(fetchDataFun, query, immediate = true) {
   // 请求到的数据
  const tableData = ref([]);
  // 分页用的
  const total = ref(0);
  // 加载控制
  const loading = ref(false);
  // 监听query变化, 重新请求数据
  const getList = async () => {
    loading.value = true;
    try {
      const { data } = await fetchDataFun(query);
      tableData.value.push(...data.list);
      total.value = data.total;
      loading.value = false
    } catch (error) {
      tableData.value = [];
      total.value = 0;
      console.log(error);
      loading.value = false
    }
  }
  // 执行列表请求
  immediate && getList()
  return {
    tableData,
    total,
    loading,
    getList,
  }
}

@/view/table.vue

import { meetingListApi } from '@/api/meeting/myMeeting'
import useQueryParms from '@/hooks/useQueryParms'
const {
  tableData,
  total,
  loading,
  getList,
} = useQueryParms(meetingListApi, queryParams.value);

ok辽，一点小技巧的分享，今天刚刚看到记录一下