Vue3：自定义hooks，实现逻辑代码封装，增强代码的复用性和可维护性（axios案例演示）

本文链接：https://blog.csdn.net/Brave_heart4pzj/article/details/136911545

一、情景说明

在Vue2中，我们想要实现代码的封装与复用性，采用的技术是mixin。
mixin技术案例演示：https://blog.csdn.net/Brave_heart4pzj/article/details/135483606

而在Vue3中，我们则使用hooks来实现这个效果。
什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装
我们可以用js文件或者ts文件来封装
hook的命名规范：useXxxx

二、案例

1、创建hook

useDog.ts
使用axios请求接口，获取数据，并使用了生命周期函数onMounted

import {reactive,onMounted} from 'vue'
import axios from 'axios'

export default function (){
  // 数据
  let dogList = reactive([
    'https://images.dog.ceo/breeds/pembroke/n02113023_4373.jpg'
  ])
  // 方法
  async function getDog(){
    try {
      let result = await axios.get('https://dog.ceo/api/breed/pembroke/images/random')
      dogList.push(result.data.message)
    } catch (error) {
      alert(error)
    }
  }
  // 钩子
  onMounted(()=>{
    getDog()
  })
  // 向外部提供东西
  return {dogList,getDog}
}

useSum.ts

import { ref ,onMounted,computed} from 'vue'

export default function () {
  // 数据
  let sum = ref(0)
  let bigSum = computed(()=>{
    return sum.value * 10
  })

  // 方法
  function add() {
    sum.value += 1
  }

  // 钩子
  onMounted(()=>{
    add()
  })

  // 给外部提供东西
  return {sum,add,bigSum}
}

2、使用hook

Person.vue
在person组件中使用hook

<template>
    <div className="person">
        <h2>当前求和为：{{ sum }}，放大10倍后：{{ bigSum }}</h2>
        <button @click="add">点我sum+1</button>
        <hr>
        <img v-for="(dog,index) in dogList" :src="dog" :key="index">
        <br>
        <button @click="getDog">再来一只小狗</button>
    </div>
</template>

<script lang="ts" setup name="Person">
    import useSum from '@/hooks/useSum'
    import useDog from '@/hooks/useDog'

    const {sum, add, bigSum} = useSum()
    const {dogList, getDog} = useDog()
</script>

<style scoped>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }

    button {
        margin: 0 5px;
    }

    li {
        font-size: 20px;
    }

    img {
        height: 100px;
        margin-right: 10px;
    }
</style>