前端学习-vue视频学习011-自定义hooks

尚硅谷视频链接

axios

了解了一下axios的语法

import axios from 'axios'

export default function () {
    let dogList = reactive(
        [
            'https://images.dog.ceo/breeds/pembroke/n02113023_4972.jpg'
        ]
    )
    async function getDog() {
        try {
            let result = await axios.get('https://dog.ceo/api/breed/pembroke/images/random')
            // console.log(result.data.message);
            dogList.push(result.data.message)
        } catch (error) {
            alert(error)
        }
    }
    return {dogList,getDog}
}

hooks

将相同的数据、方法放到同一文件内，实现模块化
.vue文件

<script lang="ts" setup name="Person">
   import useDog from '@/hooks/useDog';
   import useSum from '@/hooks/useSum';

   const {sum,bigSum} = useSum()
   const {dogList,getDog} = useDog()
</script>

useDog.ts文件

import { ref, reactive } from 'vue';
import axios from 'axios'

export default function () {
    let dogList = reactive(
        [
            'https://images.dog.ceo/breeds/pembroke/n02113023_4972.jpg'
        ]
    )
    async function getDog() {
        try {
            let result = await axios.get('https://dog.ceo/api/breed/pembroke/images/random')
            // console.log(result.data.message);
            dogList.push(result.data.message)
        } catch (error) {
            alert(error)
        }
    }
    return {dogList,getDog}
}