vue3学习笔记（7）hook函数

Vue3专栏入口

本文按照需求分次级标题

一、 实现收集用户鼠标点击位置的hook函数

1.1 目录结构

1.2 useUserPosition.ts

代码还是比较简单的，这样就可以实现代码的复用

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

export default function () {
    const x = ref('')
    const y = ref('')

    // 鼠标点击操作函数回调
    const clickHandler = (event) => {
        x.value = event.pageX
        y.value = event.pageY

    }

    // 页面加载完毕，再进行点击操作
    onMounted(() => {
        window.addEventListener('click', clickHandler)
    })

    // 页面卸载前给他删了
    onBeforeUnmount(() => {
        window.removeEventListener('click', clickHandler)
    })

    return {
        x, y
    }
}

1.3 App.vue

<template>
	<div>
		<h1>x:{{ x }}</h1>
		<h1>y:{{ y }}</h1>
	</div>
</template>

<script lang="ts">
	import { defineComponent } from "vue";
	// 导入自定义的hook函数
	import useUserPosition from "./hooks/useUserPosition";
	export default defineComponent({
		name: "App",
		setup(props, context) {
			// 调用自定义函数
			const { x, y } = useUserPosition();

			return {
				x,
				y,
			};
		},
	});
</script>

<style scoped>
</style>

二、实现axios的封装

2.1 项目目录

2.2 数据

需要可以复制，也可以自己搞

[{ "id": "01", "name": "天天搜题", "introduction": "大学生在线搜题网站：'http://tiantiansouti.com/'" }, { "id": "02", "name": "小天", "introduction": "网站的编写者" }]

2.3 useAxios.tx

难度也不高，先导入然后直接写axios发送请求，接收数据，最后return。如果有什么问题可以评论。

// 导入
import { ref } from 'vue'
import axios from 'axios'

export default function (url: string) {

    const loading = ref(true)
    const data = ref(null)
    const errorMsg = ref('')

    // 发送get请求对url地址
    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 }

}

2.4 App.vue

<template>
	<div>
		<!-- v-if如果判断为真则展示，假则销毁 -->
		<h1 v-if="loading">正在加载</h1>
		<h1 v-else-if="errorMsg">请求出错：{{ errorMsg }}</h1>
		<h1 v-else>
			<h1>请求返返回数据：</h1>
			<!-- v-for 可以更具数据循环产生内部结构 -->
			<ul v-for="item in data" :key="item.id">
				<li>id:{{ item.id }}</li>
				<li>name:{{ item.name }}</li>
				<li>introduction:{{ item.introduction }}</li>
			</ul>
		</h1>
	</div>
</template>

<script lang="ts">
	import { defineComponent } from "vue";
	// 导入自定义函数
	import userAxios from "./hooks/useAxios";

	export default defineComponent({
		name: "App",
		setup(props, context) {
			// 调用
			const { loading, data, errorMsg } = userAxios(
				"http://localhost:3000/user.json"
			);

			return {
				loading,
				data,
				errorMsg,
			};
		},
	});
</script>

<style scoped>
</style>

2.5 遇到的一个小问题

气死了气死了气死了，写案例的时候数据格式不对。本来是列表里面两个字典如下

[
{},
{}
]

结果我写成了字典里面两个字典，如下所示。

{
{},
{}
}

代码明明没问题，就是出不来结果，大家引以为鉴。