Vue 新玩具 VueUse

Posted 2021-12-29 小生方勤

作者：我只是一个小菜鸡

https://juejin.cn/post/7029699344596992031

什么是 VueUse

VueUse 是一个基于 Composition API 的实用函数集合。通俗的来说，这就是一个工具函数包，它可以帮助你快速实现一些常见的功能，免得你自己去写，解决重复的工作内容。以及进行了基于 Composition API 的封装。让你在 vue3 中更加得心应手。

简单上手

安装 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>
  <section ref="el">
    Click Outside of Me
  </section>
</template>

上面例子中，使用了 onClickOutside 函数，这个函数会在点击元素外部时触发一个回调函数。也就是这里的 close 函数。在 component 中就是这么使用

<script setup>
import  OnClickOutside  from  @vueuse/components 

function close () 
  /* ... */

</script>

<template>
  <OnClickOutside @trigger="close">
    <section>
      Click Outside of Me
    </section>
  </OnClickOutside>
</template>

注意⚠️ 这里的 OnClickOutside 函数是一个组件，不是一个函数。需要package.json 中安装了 @vueuse/components。

还还有全局状态共享的函数

// 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
  ,
)

点个在看支持我吧，转发就更好了