vue3 - 自定义hook

自定义hook

简单点来说就是将人物或者订单的所有数据和方法放在一个ts文件里面

这样便于维护 假如一个人只需要管 人物的模块 那他只需要操作usePerson.ts文件就可以了

//useDog.ts

import { ref,reactive} from 'vue';
import axios  from 'axios';export default function(){let dogList=reactive(['https://images.dog.ceo/breeds/pembroke/n02113023_4373.jpg' ])async function getDog(){let result=await axios.get('https://dog.ceo/api/breed/pembroke/images/random')dogList.push(result.data.message)}//向外部提交东西return {dogList,getDog}
}

useHeight.ts

import { ref,reactive} from 'vue';export default function(){let height=ref(0)function addHeigtht(){height.value+=1}return {height,addHeigtht}
}

person.vue

<template><div class="person"><h1>当前的高度为{{ height }}</h1><button @click="addHeigtht">点我高度加一 </button><hr><img v-for="(dog,index) in dogList" :src="dog" :key="index"><hr><hr><button @click="getDog">点我狗再来</button></div>
</template><script lang="ts" setup name="Person">import useDog from '@/hooks/useDog'import useHeight from '@/hooks/useHeight'const {dogList,getDog} =useDog()const {height,addHeigtht} =useHeight()</script><style>.person{background-color: aqua;box-shadow: 0 0 10px;padding: 20px;border-radius: 10px;}button{margin: 0 6px;}img{height: 150px;}
</style>