Composition Api封装业务hook思路示例分享

目录

前序hook的场景useGetJobList

共同思路历程心得

utils 和 hook 的区别总结

前序

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

hook的场景

这种获取列表的需求很常见吧，在我这个小程序中有3处使用到了获取列表的功能。分别是： 我的收藏、已投递岗位、未投递岗位。
当然展示岗位的 card 我是分装了一个组件，很简单的业务组件，这里也不会描述。
假如： 我的收藏、已投递岗位、未投递岗位 都各自获取列表，就会出现重复性的定义以下代码

1. const getJobParameter = reactive<paramsType>({
2.     page: 1,
3.     pageSize: 10,
4.     code: null,
5.     releaseJobName: null,
6.   });
7. const jobList = ref([] as Array<jobType>);
8. const total = ref(0);
9. onLoad(() => {
10.     getlist();
11.   });
12. onReachBottom(() => {
13.     if (jobList.value.length < total.value) {
14.       getJobParameter.page++;
15.       getlist();
16.     }
17. });
18. async function getlist() {
19.     const res: any = await fn(getJobParameter);
20.     jobList.value = await [...jobList.value, ...res.data.data.dataList];
21.     total.value = res.data.data.total;
22. }

复制代码

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

useGetJobList


共同

1. import { onLoad, onReachBottom } from '@dcloudio/uni-app';
2. import { ref, reactive } from 'vue';
3. import { jobType } from '@/types/job-hunting';
4. interface paramsType {
5.   page: number;
6.   pageSize: number;
7.   code: string | null;
8.   releaseJobName: string | null;
9. }
10. export function useGetJobList(fn) {
11.   const getJobParameter = reactive<paramsType>({
12.     page: 1,
13.     pageSize: 10,
14.     code: null,
15.     releaseJobName: null,
16.   });
17.   const jobList = ref([] as Array<jobType>);
18.   const total = ref(0);
19.   onLoad(() => {
20.     getlist();
21.   });
22.   onReachBottom(() => {
23.     if (jobList.value.length < total.value) {
24.       getJobParameter.page++;
25.       getlist();
26.     }
27.   });
28.   async function getlist() {
29.     const res: any = await fn(getJobParameter);
30.     jobList.value = await [...jobList.value, ...res.data.data.dataList];
31.     total.value = res.data.data.total;
32.   }
33.   async function refresh() {
34.     getJobParameter.page = 1;
35.     jobList.value = [];
36.     await getlist();
37.     return true;
38.   }
39.   return {
40.     jobList,
41.     refresh: () => refresh(),
42.   };
43. }

复制代码

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

思路历程

因为首页有城市的选择、岗位的搜索等功能。
下面是我开始时的想法(错误):
我想着要不把 getJobParameter 的参数全部暴露出去，然后对这些参数进行操作，但是内心感觉怪怪的，这样跟不分装好像区别也不大，又思考要不在 useGetJobList 加一个参数用来传递 参数的变化，当然这个也是行不通的。
后面看了别人分装的 hook。就有了以下代码。

1. import { onLoad, onReachBottom } from '@dcloudio/uni-app';
2. import { ref, reactive } from 'vue';
3. import { jobType } from '@/types/job-hunting';
4. interface paramsType {
5.   page: number;
6.   pageSize: number;
7.   code: string | null;
8.   releaseJobName: string | null;
9. }
10. export function useGetJobList(fn) {
11.   const getJobParameter = reactive<paramsType>({
12.     page: 1,
13.     pageSize: 10,
14.     code: null,
15.     releaseJobName: null,
16.   });
17.   const jobList = ref([] as Array<jobType>);
18.   const total = ref(0);
19.   onLoad(() => {
20.     getlist();
21.   });
22.   onReachBottom(() => {
23.     if (jobList.value.length < total.value) {
24.       getJobParameter.page++;
25.       getlist();
26.     }
27.   });
28.   async function getlist() {
29.     const res: any = await fn(getJobParameter);
30.     jobList.value = await [...jobList.value, ...res.data.data.dataList];
31.     total.value = res.data.data.total;
32.   }
33.   async function refresh() {
34.     getJobParameter.page = 1;
35.     jobList.value = [];
36.     await getlist();
37.     // 这个后面的代表异步了
38.     return true;
39.   }
40.   function reset () {
41.     getJobParameter.page = 1;
42.     getJobParameter.code = null;
43.     getJobParameter.releaseJobName = null;
44.   }
45.   function queryList(searchValue: string | null) {
46.     reset();  
47.     getJobParameter.releaseJobName = searchValue;
48.     getlist();
49.   }
50.   function codeChange(code: string | null) {
51.     reset();
52.     getJobParameter.code = code;
53.     getlist();
54.   }
55.   return {
56.     jobList,
57.     queryList: (searchValue: string | null) => queryList(searchValue),
58.     codeChange: (code: string | null) => codeChange(code),
59.     refresh: () => refresh(),
60.   };
61. }

复制代码

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

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

复制代码

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

心得

当定义了一个 hook , 当外部使用想改变 hook 内部的变量，内部写个函数暴露出去，函数的内部是对变量的修改，外部只需要使用暴露函数。这样代码十分的清晰易懂。return 再分装一个函数 是为了后期别人看代码是可以一眼就知道返回哪些是变量，哪些是函数，函数有哪些参数，参数的类型等之类的，不用一个的去查找。

utils 和 hook 的区别

之前我一直搞不清楚 hook 和 utils 的区别，我感觉差不多都是分装一个函数出来。
区别: utils 是一个简单的参数传入，然后返回，返回的变量不具有响应式。没有使用到 Vue 的 reactive、ref等钩子函数, 我认为当你使用了这些钩子函数就可以说它是一个 hook。

总结

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

当定义了一个 hook , 当外部使用想改变 hook 内部的变量就因此写一个函数暴露出去，进行变量的更改return 再分装一个函数 是为了后期别人看代码是可以一眼就知道返回哪些是变量，哪些是函数，函数有哪些参数，参数的类型等之类的，不用一个的去查找。

以上就是Composition Api封装业务hook思路示例分享的详细内容，更多关于Composition Api封装hook的资料请关注中国红客联盟其它相关文章！