Composition Api封裝業(yè)務(wù)hook思路示例分享

更新時間：2022年07月11日 15:32:16 作者：曉欲望

這篇文章主要為大家介紹了Composition Api封裝業(yè)務(wù)hook的思路示例分享，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前序

近期公司的新項(xiàng)目一個小程序，一直想嘗試 Vue3 開發(fā)項(xiàng)目，苦于自己的驅(qū)動力不行，學(xué)的零零碎碎的。因此小程序我直接跟項(xiàng)目組長說我要使用 uniapp 的 Vue3 版進(jìn)行開發(fā)。開發(fā)中遇到業(yè)務(wù)場景相同的，就分裝了一個hook 來減少代碼，易于維護(hù)。

hook的場景

這種獲取列表的需求很常見吧，在我這個小程序中有3處使用到了獲取列表的功能。分別是：我的收藏、已投遞崗位、未投遞崗位。

當(dāng)然展示崗位的 card 我是分裝了一個組件，很簡單的業(yè)務(wù)組件，這里也不會描述。

假如：我的收藏、已投遞崗位、未投遞崗位都各自獲取列表，就會出現(xiàn)重復(fù)性的定義以下代碼

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個頁面都要寫上: 定義變量 -> 初始獲取 -> 獲取的代碼判斷 -> 底部觸發(fā)的代碼。因此就直接分裝了一個 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 還未進(jìn)行操作。

思路歷程

因?yàn)槭醉撚谐鞘械倪x擇、崗位的搜索等功能。

下面是我開始時的想法(錯誤):

我想著要不把 getJobParameter 的參數(shù)全部暴露出去，然后對這些參數(shù)進(jìn)行操作，但是內(nèi)心感覺怪怪的，這樣跟不分裝好像區(qū)別也不大，又思考要不在 useGetJobList 加一個參數(shù)用來傳遞參數(shù)的變化，當(dāng)然這個也是行不通的。

后面看了別人分裝的 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(),
  };
}

這里為重新定兩個函數(shù) 分別是 queryList、codeChange，用來搜索和城市code 改變再獲取崗位列表。

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

上面代碼還有一個心得，就是在 return 是可以直接把函數(shù)寫為什么要再分裝一個函數(shù)出來？

心得

當(dāng)定義了一個 hook , 當(dāng)外部使用想改變 hook 內(nèi)部的變量，內(nèi)部寫個函數(shù)暴露出去，函數(shù)的內(nèi)部是對變量的修改，外部只需要使用暴露函數(shù)。這樣代碼十分的清晰易懂。
return 再分裝一個函數(shù) 是為了后期別人看代碼是可以一眼就知道返回哪些是變量，哪些是函數(shù)，函數(shù)有哪些參數(shù)，參數(shù)的類型等之類的，不用一個的去查找。

utils 和 hook 的區(qū)別

之前我一直搞不清楚 hook 和 utils 的區(qū)別，我感覺差不多都是分裝一個函數(shù)出來。

區(qū)別: utils 是一個簡單的參數(shù)傳入，然后返回，返回的變量不具有響應(yīng)式。沒有使用到 Vue 的 reactive、ref等鉤子函數(shù), 我認(rèn)為當(dāng)你使用了這些鉤子函數(shù)就可以說它是一個 hook。

總結(jié)

hook 有點(diǎn)想面向?qū)ο蟮恼Z言的 class, 內(nèi)部定義的變量，最好自己內(nèi)部的做處理，只需暴露出一個函數(shù)。

當(dāng)定義了一個 hook , 當(dāng)外部使用想改變 hook 內(nèi)部的變量就因此寫一個函數(shù)暴露出去，進(jìn)行變量的更改
return 再分裝一個函數(shù) 是為了后期別人看代碼是可以一眼就知道返回哪些是變量，哪些是函數(shù)，函數(shù)有哪些參數(shù)，參數(shù)的類型等之類的，不用一個的去查找。

以上就是Composition Api封裝業(yè)務(wù)hook思路示例分享的詳細(xì)內(nèi)容，更多關(guān)于Composition Api封裝hook的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: