vue编写工具（Vue工具库VueUse的具体用法）

前言 上次在看前端早早聊大会中    
    
    
   ， 尤大大再一次提到了 VueUse 的一个库    
    
    
。 好奇了一下


     


     


     

，点看看了看     


     


     


   。好家伙啊
 




 




 




， 我直接好家伙




 




 




 

。这不就是曾经我也想自己写一个 vue 版的 hooks 库吗？（因为我觉得 vue3 和 hooks 太像了） 可是我还不太会   

   

   

  ， 你现在直接把我的梦想给破灭了 

     

     

     
，下面我们一起来看看吧！VueUse 作者 Anthony Fu 分享可组合的 Vue_哔哩哔哩_bilibili

什么是 VueUse VueUse不是Vue.use

  




  




  




，它是为Vue 2和3服务的一套Vue Composition API的常用工具集  


  


  


 ，是目前世界上Star最高的同类型库之一
   

   

   

。它的初衷就是将一切原本并不支持响应式的JS API变得支持响应式  
     
     
     ，省去程序员自己写相关代码     

     

     

  。

VueUse 是一个基于 Composition API 的实用函数集合 




  




  




  
。通俗的来说


   




   




   




，这就是一个工具函数包支持了更好的逻辑分离 



 



 



，它可以帮助你快速实现一些常见的功能                  ，免得你自己去写



    




    




    



，解决重复的工作内容

  


  


  


。以及进行了机遇 Composition API 的封装     
     
     
 。

官网 https://vueuse.org/

简单上手

安装 VueUse npm i @vueuse/core

使用 VueUse

// 导入 import { useMouse, usePreferredDark, useLocalStorage } from "@vueuse/core" export default { setup() { // tracks mouse position const { x, y } = useMouse() // is user prefers dark theme const isDark = usePreferredDark() // persist state in localStorage const store = useLocalStorage( "my-storage", { name: "Apple", color: "red", }, ) return { x, y, isDark, store } } }

上面从 VueUse 当中导入了三个函数














， useMouse                  ， usePreferredDark



     



     



     


， useLocalStorage  




   




   




   。useMouse 是一个监听当前鼠标坐标的一个方法














，他会实时的获取鼠标的当前的位置


 



 



 



。usePreferredDark 是一个判断用户是否喜欢深色的方法    
    
    
   ，他会实时的判断用户是否喜欢深色的主题               。useLocalStorage 是一个用来持久化数据的方法


     


     


     

，他会把数据持久化到本地存储中   




    




    




    。

还有我们熟悉的 防抖 和 节流

import { throttleFilter, debounceFilter, useLocalStorage, useMouse } from "@vueuse/core" // 以节流的方式去改变 localStorage 的值 const storage = useLocalStorage("my-key", { foo: "bar" }, { eventFilter: throttleFilter(1000) }) // 100ms后更新鼠标的位置 const { x, y } = useMouse({ eventFilter: debounceFilter(100) })

还有还有在 component 中使用的函数

<script setup> import { ref } from "vue" import { onClickOutside } from "@vueuse/core" const el = ref() function close () { /* ... */ } onClickOutside(el, close) </script> <template> <div ref="el"> Click Outside of Me </div> </template>

上面例子中
 




 




 




，使用了 onClickOutside 函数   

   

   

  ，这个函数会在点击元素外部时触发一个回调函数

















。也就是这里的 close 函数               。在 component 中就是这么使用

<script setup> import { OnClickOutside } from "@vueuse/components" function close () { /* ... */ } </script> <template> <OnClickOutside @trigger="close"> <div> Click Outside of Me </div> </OnClickOutside> </template>``` 注意⚠️ 这里的 OnClickOutside 函数是一个组件 

     

     

     
，不是一个函数    



     



     



    。需要package.json 中安装了 @vueuse/components

















。 **全局状态共享的函数** ```html // store.js import { createGlobalState, useStorage } from "@vueuse/core" export const useGlobalState = createGlobalState( () => useStorage("vue-use-local-storage"), ) // component.js import { useGlobalState } from "./store" export default defineComponent({ setup() { const state = useGlobalState() return { state } }, })

这样子就是一个简单的状态共享了    
    
    
。扩展一下     


     


     


   。传一个参数

  




  




  




，就能改变 store 的值了




 




 




 

。

还有关于 fetch, 下面👇就是一个简单的请求了
   

   

   

。 import { useFetch } from "@vueuse/core" const { isFetching, error, data } = useFetch(url)

它还有很多的 option 参数  


  


  


 ，可以自定义     

     

     

  。

// 100ms超时 const { data } = useFetch(url, { timeout: 100 }) / 请求拦截 const { data } = useFetch(url, { async beforeFetch({ url, options, cancel }) { const myToken = await getMyToken() if (!myToken) cancel() options.headers = { ...options.headers, Authorization: `Bearer ${myToken}`, } return { options } } }) // 响应拦截 const { data } = useFetch(url, { afterFetch(ctx) { if (ctx.data.title === "HxH") ctx.data.title = "Hunter x Hunter" // Modifies the resposne data return ctx }, })

更多还的看VueUse 文档  
     
     
     ，还有另一个vue-demi