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

更新时间：2022年07月11日 15:32:16 作者：晓欲望

这篇文章主要为大家介绍了Composition Api封装业务hook的思路示例分享，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

前序

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

hook的场景

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

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

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

const getJobParameter = reactive<paramsType>({
    page: 1,
    pageSize: 10,
    code: null,
    releaseJobName: null,
  });
const jobList = ref([] as Array<jobType>);
const total = ref(0);
onLoad(() => {
    getlist();
  });
onReachBottom(() => {
    if (jobList.value.length < total.value) {
      getJobParameter.page++;
      getlist();
    }
});
async function getlist() {
    const res: any = await fn(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';
interface paramsType {
  page: number;
  pageSize: number;
  code: string | null;
  releaseJobName: string | null;
}
export function useGetJobList(fn) {
  const getJobParameter = reactive<paramsType>({
    page: 1,
    pageSize: 10,
    code: null,
    releaseJobName: null,
  });
  const jobList = ref([] as Array<jobType>);
  const total = ref(0);
  onLoad(() => {
    getlist();
  });
  onReachBottom(() => {
    if (jobList.value.length < total.value) {
      getJobParameter.page++;
      getlist();
    }
  });
  async function getlist() {
    const res: any = await fn(getJobParameter);
    jobList.value = await [...jobList.value, ...res.data.data.dataList];
    total.value = res.data.data.total;
  }
  async function refresh() {
    getJobParameter.page = 1;
    jobList.value = [];
    await getlist();
    return true;
  }
  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';
interface paramsType {
  page: number;
  pageSize: number;
  code: string | null;
  releaseJobName: string | null;
}
export function useGetJobList(fn) {
  const getJobParameter = reactive<paramsType>({
    page: 1,
    pageSize: 10,
    code: null,
    releaseJobName: null,
  });
  const jobList = ref([] as Array<jobType>);
  const total = ref(0);
  onLoad(() => {
    getlist();
  });
  onReachBottom(() => {
    if (jobList.value.length < total.value) {
      getJobParameter.page++;
      getlist();
    }
  });
  async function getlist() {
    const res: any = await fn(getJobParameter);
    jobList.value = await [...jobList.value, ...res.data.data.dataList];
    total.value = res.data.data.total;
  }
  async function refresh() {
    getJobParameter.page = 1;
    jobList.value = [];
    await getlist();
    // 这个后面的代表异步了
    return true;
  }
  function reset () {
    getJobParameter.page = 1;
    getJobParameter.code = null;
    getJobParameter.releaseJobName = null;
  }
  function queryList(searchValue: string | null) {
    reset();  
    getJobParameter.releaseJobName = searchValue;
    getlist();
  }
  function codeChange(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 内部的变量就因此写一个函数暴露出去，进行变量的更改
return 再分装一个函数是为了后期别人看代码是可以一眼就知道返回哪些是变量，哪些是函数，函数有哪些参数，参数的类型等之类的，不用一个的去查找。

以上就是Composition Api封装业务hook思路示例分享的详细内容，更多关于Composition Api封装hook的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

vue.js集成echarts时遇到的一些问题总结
这篇文章主要给大家总结介绍了关于vue.js集成echarts遇到的一些问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-04-04
vue控制多行文字展开收起的实现示例
这篇文章主要介绍了vue控制多行文字展开收起的实现示例（也叫控制文字展开隐藏），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-10-10
vue3中$attrs的变化与inheritAttrs的使用详解
$attrs现在包括class和style属性。也就是说在vue3中$listeners不存在了，vue2中$listeners是单独存在的，在vue3 $attrs包括class和style属性, vue2中 $attrs 不包含class和style属性，这篇文章主要介绍了vue3中$attrs的变化与inheritAttrs的使用 ,需要的朋友可以参考下
2022-10-10
Vue的三种路由模式总结
这篇文章主要介绍了Vue的三种路由模式总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03
解决vue-cli webpack打包后加载资源的路径问题
今天小编就为大家分享一篇解决vue-cli webpack打包后加载资源的路径问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
Vue3 之 Vue 事件处理指南
Vue事件处理是每个Vue项目的必要方面。它用于捕获用户输入，共享数据以及许多其他创造性方式。在本文中，会介绍基础知识，并提供一些用于处理事件的代码示例。需要的小伙伴可以参考下面文章的具体内容
2021-09-09
vue如何从接口请求数据
本篇文章主要介绍了vue如何从接口请求数据，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
Vue CLI中模式与环境变量的深入详解
模式是 Vue CLI 项目中一个重要的概念，下面这篇文章主要给大家介绍了关于Vue CLI中模式与环境变量的相关资料，需要的朋友可以参考下
2021-05-05
vue-print-nb只打印一页解决方法示例
这篇文章主要为大家介绍了vue-print-nb只打印一页解决方法示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪<BR>
2023-11-11
vue 组件中使用 transition 和 transition-group实现过渡动画
本文给大家分享一下vue 组件中使用 transition 和 transition-group 设置过渡动画,总结来说可分为分为 name 版, js 钩子操作类名版, js 钩子操作行内样式版，本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
2019-07-07