Vue新玩具VueUse

什么是 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>

  <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。

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

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

  },

})