【金秋打卡】第8天 Vue3 + Typescript 从0到1开发通用基础组件（3-11~3-13）

课程名称：Vue3 + Typescript 从0到1开发通用基础组件

课程章节：
3-11 vue3 模块化-追踪鼠标
3-12 vue3 模块化 第二部分
3-13 vue3 模块化 泛型改造

课程讲师：张轩

课程内容：

今天课程学习的主要知识点内容包括：
1、vue3 模块化-追踪鼠标案例；
2、vue3 模块化-接口请求案例；
3、vue3 模块化-接口请求案例之泛型改造；

课程收获：

通过学习老师的视频课程和同学的公开笔记，主要收获如下：
一、vue3 模块化-追踪鼠标案例
1、抽离逻辑实现到定义文件 userMousePosition.ts

import {reactive,onMounted,onUnmounted} from 'vue';
function userMousePosition(){
    const pos=reactive({
        x:0,
        y:0
    })

    // const x = ref(0);
    // const y = ref(0);

    const updateMouse = (e: MouseEvent) => {
        pos.x = e.pageX;
        pos.y = e.pageY;
    };

    onMounted(() => {
      document.addEventListener("click", updateMouse);
    });

    onUnmounted(() => {
      document.removeEventListener("click", updateMouse);
    });

    return pos
}

2、在需要使用的地方进行使用

const { x, y } = toRefs(userMousePosition());

二、vue3 模块化-接口请求案例
1、抽离逻辑实现到定义文件 useURLLoader.ts

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

function useURLLoader<T>(url: string) {
  const result = ref(null)
  const loading = ref(true)
  const loaded = ref(false)
  const error = ref(null)

  axios.get(url).then((rawData) => {
    loading.value = false
    loaded.value = true
    result.value = rawData.data
  }).catch(e => {
    error.value = e
    loading.value = false
  })

  return {
    result,
    loading,
    error,
    loaded
  }
}

export default useURLLoader

2、在需要使用的地方进行使用

const {result,loading,loaded,error}= useURLLoader('https://dog.ceo/api/breeds/image/random');

三、vue3 模块化-接口请求案例之泛型改造
1、泛型改造

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

function useURLLoader<T>(url: string) {
  const result = ref<T | null>(null)
  const loading = ref(true)
  const loaded = ref(false)
  const error = ref(null)

  axios.get(url).then((rawData) => {
    loading.value = false
    loaded.value = true
    result.value = rawData.data
  }).catch(e => {
    error.value = e
    loading.value = false
  })

  return {
    result,
    loading,
    error,
    loaded
  }
}

export default useURLLoader

2、调用界面

interface DogResult {
  message: string;
  status: string;
}

const {result,loading,loaded,error}= useURLLoader<DogResult>('https://dog.ceo/api/breeds/image/random')
watch(result,()=>{
  if(result.value){
    console.log('result', result.value.message)
  }
})