Vue3 - 自定义hook函数请求数据

<template>
  <div id="nav">
      <h2>坐标为：</h2>
      <h3>x:{{x}},y:{{y}}</h3>
      <h3 v-if="loading">正在加载中</h3>
      <h3 v-else-if="errorMsg">错误信息：{{errorMsg}}</h3>
<!--      <ul v-else>-->
<!--          <li>{{data.id}}</li>-->
<!--          <li>{{data.address}}</li>-->
<!--          <li>{{data.distance}}</li>-->
<!--      </ul>-->
      <ul v-else v-for="item in data" :key="item.id">
          <li>{{item.id}}</li>
          <li>{{item.title}}</li>
          <li>{{item.price}}</li>
      </ul>
  </div>
</template>

<script lang="ts">
    // 定义接口，约束对象的类型
    interface IAddressData {
        id: number,
        address: string,
        distance: string
    }

    interface IProductData {
        id: number,
        title: string,
        price: number
    }

    // 需求1：用户在页面中点击页面，把点击位置的横纵坐标收集并展示出来
    import {defineComponent,watch} from "vue";
    import useRequest from "@/hooks/useRequest";
    import useMousePosition from "@/hooks/useMousePosition";


    export default defineComponent({
        setup() {
            const {x,y} = useMousePosition();
            // 获取对象数据
            // const {loading,data,errorMsg} = useRequest<IAddressData>('./data/address.json')
            // 获取数组数据,因为是个数组所以要初始化
            const {loading,data,errorMsg} = useRequest<IProductData[]>('./data/product.json');
            // 监视
            watch(data,()=> {
                if (data.value) {
                    console.log(data.value.length)
                }
            })
            return {
                x,
                y,
                loading,
                data,
                errorMsg
            }
        }
    })
</script>

<style>

</style>

知识点
泛型就是解决类、接口、方法的复用性以及对不特定类型的数据的支持。
泛型表示传递一个T类型，在new的时候才把具体类型传入。其中T是变量可改，但通常比较常见就是写T