Vue3 hooks 的问题

1 、因为很多页面都需要用到表格，所以我抽取了表格的逻辑到一个叫 useCommonTable.ts 的文件中，大概如下：

// ...省略无关代码 export default function (url) { const isLoading = ref(false) const tableData = ref([]) const commOnTableConfig= reactive({ // ... }) const getTableData = () => { // ... } return { isLoading, tableData, commonTableConfig, getTableData } } 

在使用的时候，一般就是如下：

setup() { const { isLoading, tableData, commonTableConfig, getTableData } = useCommonTable('url') return { isLoading, tableData, commonTableConfig, getTableData } } 

但是好死不死，突然有一个页面有 2 个表格，然后逻辑也一样，那我解构就重名了

setup() { // 表格 1 const { isLoading, tableData, commonTableConfig, getTableData } = useCommonTable('url1') // 表格 2 const { isLoading, tableData, commonTableConfig, getTableData } = useCommonTable('url2') return { isLoading, tableData, commonTableConfig, getTableData } } 

所以这种情况应该如何使用啊？我目前是

setup() { // 表格 1 const useTable1 = useCommonTable('url1') // 表格 2 const useTable2= useCommonTable('url2') return { isLoading1: useTable1.isLoading, tableData1: useTable1.tableData, commonTableConfig :useTable1.commonTableConfig, getTableData1: useTable1.getTableData, isLoading2: useTable2.isLoading, tableData2: useTable2.tableData, commonTableConfig :useTable1.commonTableConfig, getTableData2: useTable2.getTableData } } 

感觉这种导入方式有点里八嗦的。。。不知道各位大神是如何做的？能否教教小弟。。。

2 、关于 hooks 之间的调用

// hook1.ts export default function() { const getStudentDetails = (studentId) => { // ... } } // hook2.ts export default function() { const getClassDetails = async () => { const studentIds = await self.$axios.get('...') // 这里希望调用 hook1.ts 中的方法 // getStudentDetails(studentIds[0]) } } 

如果使用 callback 方式，在 hook2.ts 中传入的话，会导致 setup 中的引入必须有先后关系：

setup() { const {getStudentDetails} = useHook1() const {getClassDetails} = useHook2(getStudentDetails) return { // ... } } 

大哥们能教教小弟吗？新手勿喷，感谢大家！