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>
相关推荐
R-G-B20 分钟前
【33】C# WinForm入门到精通 ——表格布局器TableLayoutPanel【属性、方法、事件、实例、源码】
开发语言·c#·c# winform·表格布局器·tablelayoutpane
cos27 分钟前
FE Bits 前端周周谈 Vol.1|Hello World、TanStack DB 首个 Beta 版发布
前端·javascript·css
郝学胜-神的一滴38 分钟前
Spring Boot Actuator 保姆级教程
java·开发语言·spring boot·后端·程序人生
赵英英俊1 小时前
Python day31
开发语言·python
剪刀石头布啊1 小时前
var、let、const与闭包、垃圾回收
前端·javascript
剪刀石头布啊1 小时前
js常见的单例
前端·javascript
剪刀石头布啊1 小时前
iframe通信、跨标签通信的常见方案
前端·javascript·html
阿星做前端1 小时前
如何构建一个自己的 Node.js 模块解析器:node:module 钩子详解
前端·javascript·node.js
程序员-Queen2 小时前
RDQS_c和RDQS_t的作用及区别
c语言·开发语言
慕y2742 小时前
Java学习第九十三部分——RestTemplate
java·开发语言·学习