vue3 - 自定义hook

自定义hook

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

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

//useDog.ts

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

ts 复制代码
import { ref,reactive} from 'vue';

export default function(){
    let height=ref(0)
    
    function addHeigtht(){
        height.value+=1
    }

    return {height,addHeigtht}
}

person.vue

ts 复制代码
<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>
相关推荐
XH华2 小时前
C语言第十一章内存在数据中的存储
c语言·开发语言
ZXT3 小时前
js基础重点复习
javascript
言兴3 小时前
秋招面试---性能优化(良子大胃袋)
前端·javascript·面试
AndrewHZ4 小时前
【python与生活】如何用Python写一个简单的自动整理文件的脚本?
开发语言·python·生活·脚本·文件整理
拉法豆粉4 小时前
在压力测试中如何确定合适的并发用户数?
java·开发语言
枯萎穿心攻击4 小时前
Unity VS UE 性能工具与内存管理
开发语言·游戏·unity·ue5·游戏引擎·虚幻·虚幻引擎
老赵的博客4 小时前
c++ 常用接口设计
开发语言·c++
binbinaijishu884 小时前
Python爬虫入门指南:从零开始的网络数据获取之旅
开发语言·爬虫·python·其他
chenglin0164 小时前
Logstash_Input插件
java·开发语言
3壹5 小时前
单链表:数据结构中的高效指针艺术
c语言·开发语言·数据结构