Vue3 hooks 结构重名和互相调用

  • Z时代
  • 2024-02-13
  • 分类：IT

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 {
    // ...
  }
}

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

回答：

两个组件逻辑也很像，你可以把他直接封成组件，至于第二个没想到好的

以上是 Vue3 hooks 结构重名和互相调用 的全部内容， 来源链接： utcz.com/p/935985.html

回到顶部