新建hooks文件夹
useDog.ts
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}
}
使用
<template>
<div class="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>