Vue3 hooks 的问题

2021-08-20 14:35:41 +08:00
 17681880207

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

大哥们能教教小弟吗?新手勿喷,感谢大家!

2502 次点击
所在节点    程序员
21 条回复
sjhhjx0122
2021-08-21 11:44:57 +08:00
@shakukansp 我的意思是他应该用这个 hook,封装一个基础 table 组件,复用这个组件,因为 loading,分页,请求都是基本功能,当封装的组件不满足他的基本需求时候,再用普通的 table 标签+hook 配合其他 hook,就像 ahooks 有 useAntdTable 的 hook,为什么 protable 还封装了这么多功能

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/797017

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX