Cnkrru

自定义hook

项目	说明
什么是 hook	本质是一个函数，把 `setup` 函数中使用的 `Composition API` 进行了封装，类似于 `vue2.x` 中的 `mixin`
自定义 hook 的优势	复用代码，让 `setup` 中的逻辑更清楚易懂

示例代码：

useSum.ts中内容如下：

import {ref,onMounted} from 'vue'

export default function(){
let sum = ref(0)

const increment = ()=>{
    sum.value += 1
}
const decrement = ()=>{
    sum.value -= 1
}
onMounted(()=>{
    increment()
})

//向外部暴露数据
return {sum,increment,decrement}
}

useDog.ts中内容如下：

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

export default function(){
let dogList = reactive<string[]>([])}

// 方法
async function getDog(){
    try {
    // 发请求
    let {data} = await axios.get('https://dog.ceo/api/breed/pembroke/images/random')
    // 维护数据
    dogList.push(data.message)
    } 
    catch (error) {
    // 处理错误
    const err = <AxiosError>error
    console.log(err.message)}
}

// 挂载钩子
onMounted(()=>{getDog()})

//向外部暴露数据
return {dogList,getDog}
}

组件中具体使用：

<template>
<h2>当前求和为：{{sum}}</h2>
<button @click="increment">点我+1</button>
<button @click="decrement">点我-1</button>
<hr>
<img v-for="(u,index) in dogList.urlList" :key="index" :src="(u as string)"> 
<span v-show="dogList.isLoading">加载中......</span><br>
<button @click="getDog">再来一只狗</button>
</template>

<script lang="ts">
import {defineComponent} from 'vue'

export default defineComponent({
    name:'App',
})
</script>

<script setup lang="ts">
import useSum from './hooks/useSum'
import useDog from './hooks/useDog'

let {sum,increment,decrement} = useSum()
let {dogList,getDog} = useDog()
</script>