Extraer métodos públicos en Vue3

1. Cree common.js y coloque el método reutilizable en este archivo:

import {nextTick, onMounted, onUnmounted, ref} from "vue";

export function tableList(getListFn) {
    const tableDataList = ref([]);
    const currentPage = ref();
    const totalCount = ref();
    const pageSize = ref();
    const inputVal = ref();
    const tableHeight = ref();
    const mainSectionContainer = ref(null);
    const tableContainer = ref(null);

    const getTableList = async (page, size, email) => {}

    const setTableHeight = async () => {}

    const searchEmail = () => {}
    const handleSizeChange = (val) => {}
    const handleCurrentChange = (val) => {}
    let timer = 0;
    const onResize = () => {}
    onMounted(() => {});

    onUnmounted(() => {})

    //最后将定义的方法及参数return出去
    return {
        tableDataList,
        currentPage,
        totalCount,
        pageSize,
        inputVal,
        tableHeight,
        mainSectionContainer,
        tableContainer,
        searchEmail,
        handleSizeChange,
        handleCurrentChange,
    }
}

2. Referencia en la página

<script setup>
//引入js文件中的方法
import {tableList} from "@/assets/js/common";
import {getBackendImageList} from "@/api";

//将需要使用的方法以及参数进行调用
const {
  tableDataList: backendImageList,
  currentPage,
  totalCount,
  pageSize,
  inputVal,
  tableHeight,
  mainSectionContainer,
  tableContainer,
  searchEmail,
  handleSizeChange,
  handleCurrentChange,
} = tableList(getBackendImageList)//备注：如果每个页面使用的接口不一样，可定义一个函数（例如：getBackendImageList）进行传参
</script>