09_简单的hook

1.收集鼠标点击位置

import { ref, onMounted, onBeforeUnmount } from "vue";

export default function () {

const x = ref(-1)

const y = ref(-1)

const clickHandler = (event:MouseEvent) => {

x.value = event.pageX

y.value = event.pageY

}

//页面加载完毕点击

onMounted(() => {

window.addEventListener('click', clickHandler)

})

//页面卸载之前的生命周期组合API

onBeforeUnmount(() => {

window.removeEventListener('click', clickHandler)

})

return {

x,

y

};

}

2.获取地址

import { ref } from "vue"

import axios from 'axios'

export default function (url: string) {

    //加载的状态

    const loading = ref(true)

    //数据请求

    const data = ref(null)

    //错误信息

    const errorMsg = ref('')

    axios.get(url).then(response => {

        //改变加载状态

        loading.value = false

        data.value = response.data

    }).catch(error => {

        //改变加载状态

        loading.value = false

        errorMsg.value = error.message || '未知错误'

    })

    return {

        loading,

        data,

        errorMsg

    }

}