使用CompositionApi封装业务hook的思路分享

发布网友发布时间：2024-09-30 12:54

我来回答

共1个回答

热心网友时间：2024-11-17 00:29

前序

近期公司的新项目一个小程序，一直想尝试Vue3开发项目，苦于自己的驱动力不行，学的零零碎碎的。因此小程序我直接跟项目组长说我要使用uniapp的Vue3版进行开发。开发中遇到业务场景相同的，就分装了一个hook来减少代码，易于维护。

hook的场景

这种获取列表的需求很常见吧，在我这个小程序中有3处使用到了获取列表的功能。分别是：我的收藏、已投递岗位、未投递岗位。

当然展示岗位的card我是分装了一个组件，很简单的业务组件，这里也不会描述。

假如：我的收藏、已投递岗位、未投递岗位都各自获取列表，就会出现重复性的定义以下代码

constgetJobParameter=reactive<paramsType>({page:1,pageSize:10,code:null,releaseJobName:null,});constjobList=ref([]asArray<jobType>);consttotal=ref(0);onLoad(()=>{getlist();});onReachBottom(()=>{if(jobList.value.length<total.value){getJobParameter.page++;getlist();}});asyncfunctiongetlist(){constres:any=awaitfn(getJobParameter);jobList.value=await[...jobList.value,...res.data.data.dataList];total.value=res.data.data.total;}

3个页面都要写上:定义变量->初始获取->获取的代码判断->底部触发的代码。因此就直接分装了一个hook。

useGetJobList共同import{onLoad,onReachBottom}from'@dcloudio/uni-app';import{ref,reactive}from'vue';import{jobType}from'@/types/job-hunting';interfaceparamsType{page:number;pageSize:number;code:string|null;releaseJobName:string|null;}exportfunctionuseGetJobList(fn){constgetJobParameter=reactive<paramsType>({page:1,pageSize:10,code:null,releaseJobName:null,});constjobList=ref([]asArray<jobType>);consttotal=ref(0);onLoad(()=>{getlist();});onReachBottom(()=>{if(jobList.value.length<total.value){getJobParameter.page++;getlist();}});asyncfunctiongetlist(){constres:any=awaitfn(getJobParameter);jobList.value=await[...jobList.value,...res.data.data.dataList];total.value=res.data.data.total;}asyncfunctionrefresh(){getJobParameter.page=1;jobList.value=[];awaitgetlist();returntrue;}return{jobList,refresh:()=>refresh(),};}

已上代码就是简单的获取到岗位的list还未进行操作。

思路历程

因为首页有城市的选择、岗位的搜索等功能。

下面是我开始时的想法(错误):

我想着要不把getJobParameter的参数全部暴露出去，然后对这些参数进行操作，但是内心感觉怪怪的，这样跟不分装好像区别也不大，又思考要不在useGetJobList加一个参数用来传递参数的变化，当然这个也是行不通的。

后面看了别人分装的hook。就有了以下代码。

import{onLoad,onReachBottom}from'@dcloudio/uni-app';import{ref,reactive}from'vue';import{jobType}from'@/types/job-hunting';interfaceparamsType{page:number;pageSize:number;code:string|null;releaseJobName:string|null;}exportfunctionuseGetJobList(fn){constgetJobParameter=reactive<paramsType>({page:1,pageSize:10,code:null,releaseJobName:null,});constjobList=ref([]asArray<jobType>);consttotal=ref(0);onLoad(()=>{getlist();});onReachBottom(()=>{if(jobList.value.length<total.value){getJobParameter.page++;getlist();}});asyncfunctiongetlist(){constres:any=awaitfn(getJobParameter);jobList.value=await[...jobList.value,...res.data.data.dataList];total.value=res.data.data.total;}asyncfunctionrefresh(){getJobParameter.page=1;jobList.value=[];awaitgetlist();//这个后面的代表异步了returntrue;}functionreset(){getJobParameter.page=1;getJobParameter.code=null;getJobParameter.releaseJobName=null;}functionqueryList(searchValue:string|null){reset();getJobParameter.releaseJobName=searchValue;getlist();}functioncodeChange(code:string|null){reset();getJobParameter.code=code;getlist();}return{jobList,queryList:(searchValue:string|null)=>queryList(searchValue),codeChange:(code:string|null)=>codeChange(code),refresh:()=>refresh(),};}

这里为重新定两个函数分别是queryList、codeChange，用来搜索和城市code改变再获取岗位列表。

queryList:(searchValue:string|null)=>queryList(searchValue),codeChange:(code:string|null)=>codeChange(code),

上面代码还有一个心得，就是在return是可以直接把函数写为什么要再分装一个函数出来？

心得

当定义了一个hook,当外部使用想改变hook内部的变量，内部写个函数暴露出去，函数的内部是对变量的修改，外部只需要使用暴露函数。这样代码十分的清晰易懂。

return再分装一个函数是为了后期别人看代码是可以一眼就知道返回哪些是变量，哪些是函数，函数有哪些参数，参数的类型等之类的，不用一个的去查找。

utils和hook的区别

之前我一直搞不清楚hook和utils的区别，我感觉差不多都是分装一个函数出来。

区别:?utils是一个简单的参数传入，然后返回，返回的变量不具有响应式。没有使用到Vue的reactive、ref等钩子函数,我认为当你使用了这些钩子函数就可以说它是一个hook。

总结

hook有点想面向对象的语言的class,内部定义的变量，最好自己内部的做处理，只需暴露出一个函数。

当定义了一个hook,当外部使用想改变hook内部的变量就因此写一个函数暴露出去，进行变量的更改

最后

这里是个人的心得与体会，有错的地方请大佬们指教，目前正向着钩子开发进军。当然大佬们有好的分装思想，请教教小弟，跪求。

原文：https://juejin.cn/post/7103364144576856094