【Vue3】组合式函数

一：基础概念

        组合式函数是指利用组合式API封装和复用携带状态的逻辑的函数（感觉有点像mixin，因为它会携带状态）

        命名规则：use开头，中间小驼峰。eg：useChangeNum

        组合式 API 名字的由来：一个组合式函数可以调用一个或多个其他的组合式函数。这使得我们可以像使用多个组件组合成整个应用一样，用多个较小且逻辑独立的单元来组合形成复杂的逻辑。实际上，这正是为什么我们决定将实现了这一设计模式的 API 集合命名为组合式API

        分类：

                ①无状态逻辑函数：函数在接收一些输入后立刻返回所期望的输出，常见的复用无状态                      逻辑的库有：lodash、date-fns

                    说白了：函数负责接收数据，返回数据

                ②有状态逻辑函数：负责管理会随时间而变化的状态

                    说白了：函数内部定义数据，内部处理出数据处理的逻辑，返回数据

二：基础代码示例

        描述：图片跟随鼠标移动

//文件：src/composables/usemouse.ts

import { onMounted, ref } from 'vue';

export function useMouse(){
  // 接收鼠标位置
const x=ref(0)
const y=ref(0)

function getMouse(e:MouseEvent){
  x.value=e.pageX
  y.value=e.pageY
}
onMounted(()=>{
  window.addEventListener('mousemove',getMouse)
  
})
return {x,y}
}

        

//文件：src/views/flydog.vue

<template>
  <img 
  :style="{left: x+'px',top:y+'px'}"
  src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202007%2F11%2F20200711132147_Ld4Ew.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1694154357&t=aa4d57b59c287ddbbfd7da9fe60b04bb" alt="">
</template>

<script lang="ts" setup>
import { useMouse } from '@/Composables/useMouse';
const {x,y}=useMouse()


</script>

<script lang="ts">
export default {
  name: 'VFlayDog'
}
</script>

<style lang="scss" scoped>
img{
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
</style>

三：组合式函数封装异步状态（带参数）

描述：将一个图片接口封装成一个组合式函数，调用时需要提供地址和方式两种参数，获取到地址、响应状态和错误信息这三个数据

//文件：src/composables/fetch.ts

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

// 封装一个请求的组合式函数
export default function useFetch(url:string,method:string){

  const res=ref()
  const loading=ref(true)
  const errMsg=ref()

  axios({
    url,
    method
  }).then((data)=>{
    console.log(data)
    loading.value=false
    res.value=data.data
  }).catch((err)=>{
    loading.value=false
    errMsg.value=err||"未知错误"
  })

  return {res,loading,errMsg}
}

//文件：src/views/dogfetch.vue

<template>
  <h3 v-if="loading">数据加载中</h3>
  <div v-if="res?.message">
    <img :src="res?.message" alt="">
  </div>
  <h3>{{ errMsg }}</h3>
</template>

<script lang="ts" setup>
//这里引入的时候别加ts后缀，不然可能有报错
import useFetch from "@/Composables/fetch"
let {res,loading,errMsg}=useFetch('https://dog.ceo/api/breeds/image/random', 'get')

</script>

<script lang="ts">
export default {
  name: 'VDogFetch'
}
</script>

<style lang="scss" scoped></style>