36 自定义hook 功能复用

1 首页模块-关注医生(课堂练习){#home-like}

实现：关注医生业务

步骤：

• 定义关注与取消关注API函数
• 实现关注和取消关注逻辑

代码：

1. 定义关注与取消关注API

types/consult.d.ts

// 关注的类型
export type FollowType = 'doc' | 'knowledge' | 'topic' | 'disease'

api/consult.ts

export const followDoctor = (id: string, type: FollowType = 'doc') =>
  request.post('/like', { id, type })

2. 实现关注和取消关注逻辑

Home/***ponents/DoctorCard.vue

<van-button
+            :loading="loading"
+            @click="follow(item)"
            round size="small" type="primary">
              {{ item.likeFlag === 1 ? '已关注' : '+ 关注' }}
            </van-button>

import type { Doctor } from '@/types/consult'
import { followDoctor } from '@/api/consult'
import { ref } from 'vue'

defineProps<{ item: Doctor }>()

// 关注逻辑
const loading = ref(false)
const follow = async (doc: Doctor) => {
  // 防止重复点击
  loading.value = true
  try {
    await followDoctor(doc.id)
    doc.likeFlag = doc.likeFlag === 1 ? 0 : 1
  } finally {
    // 无论 try / catch 结果如何都会执行的代码块
    loading.value = false
  }
}

说明：关注接口后台没有实现，存储关注状态

2 首页模块-逻辑复用{#home-like-logic}

利用组合API，实现关注医生业务逻辑复用

封装：

***posable/index.ts

import { ref } from 'vue'
import { followDoctor } from '@/api/consult'
import type { FollowType } from '@/types/consult'

// 封装逻辑，规范 useXxx，表示使用某功能
export const useFollow = (type: FollowType = 'doc') => {
  const loading = ref(false)
  // {a, b} 类型，传值得时候 {a, b, c} 也可以，这是类型兼容：多的可以给少的
  const follow = async (obj: { id: string; likeFlag: 0 | 1 }) => {
    loading.value = true
    try {
      await followDoctor(obj.id, type)
      obj.likeFlag = obj.likeFlag === 1 ? 0 : 1
    } finally {
      loading.value = false
    }
  }
  return { loading, follow }
}

使用：

DoctorCard.vue

<script lang="ts" setup>
import type { Doctor } from '@/types/consult'
import { useFollow } from '@/***posable'

defineProps<{ item: Doctor }>()

// 关注逻辑
// const loading = ref(false)
// const follow = async (doc: Doctor) => {
//   // 防止重复点击
//   loading.value = true
//   try {
//     await followDoctor(doc.id)
//     doc.likeFlag = doc.likeFlag === 1 ? 0 : 1
//   } finally {
//     // 无论 try / catch 结果如何都会执行的代码块
//     loading.value = false
//   }
// }
const { loading, follow } = useFollow()
</script>

KnowledgeCard.vue

const { loading, follow } = useFollow('knowledge')

 <van-button
+             :loading="loading" @click="follow(item)"
             round size="small" type="primary">
              {{ item.likeFlag === 1 ? '已关注' : '+ 关注' }}
            </van-button>

小结：

• 是组合API封装逻辑复用的函数，一般叫 hook 函数，是一种逻辑复用的思想
• 对象类型多的可以传递给少的，叫：类型兼容