vue3的自定义hook函数

自定义hook函数

• 使用Vue3的组合API封装的可复用的功能函数

• 自定义hook的作用类似于vue2中的mixin技术

• 自定义Hook的优势: 很清楚复用功能代码的来源, 更清楚易懂

• 需求1: 收集用户鼠标点击的页面坐标

这里先看一下大体项目结构：

这里的hooks下的文件是示例代码，public内的是测试数据

在启动项目后，测试public的data文件内的数据，

App.vue

src下hooks的 useMousePosition.ts

import { ref, onBeforeUnmount, onMounted } 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
  }
}

src下hooks的 useRequest.ts

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


interface AddressData{
  id: number;
  address:string;
  distance:string;
}
interface ProductsData{
  id: string;
  title:string;
  price:number;
}

export default function (url:string) {
  // 加载的状态
  const loading = ref(true)
  // 请求成功的数据   // 用于数据格式替换  ProductsData
  const data = ref(null)
  // 错误信息
  const errorMsg = ref('')
  // 发送请求
  axios.get(url).then(response => {
    // 改变加载状态
    loading.value = false
    data.value = response.data
  }).catch(error=>{
    console.log(111);
  })

  return {
    loading, 
    data,
    errorMsg
  }
}

public下data的  address.json

{
  "id": 1,
  "address": "陕西西安",
  "distance": "100m"
}

public下data的  products.json

[
  {
    "id":"001",
    "title": "华为",
    "price": 3000
  },
  {
    "id": "002",
    "title": "小米12",
    "price": 1900
  }
]

最后查看一下整体运行展示：