Vue新玩具VueUse的具體用法

更新時間：2021年11月15日 10:44:06 作者：我只是一個小菜雞

VueUse 是一個基于 Composition API 的實用函數集合。本文就詳細的介紹了VueUse的具體用法，具有一定的參考價值，感興趣的可以了解一下

前言

上次在看前端早早聊大會中，尤大大再一次提到了 VueUse 的一個庫。好奇了一下，點看看了看。好家伙啊，我直接好家伙。這不就是曾經我也想自己寫一個 vue 版的 hooks 庫嗎？（因為我覺得 vue3 和 hooks 太像了）可是我還不太會，你現(xiàn)在直接把我的夢想給破滅了，下面我們一起來看看吧！VueUse 作者 Anthony Fu 分享可組合的 Vue_嗶哩嗶哩_bilibili

什么是 VueUse

VueUse不是Vue.use，它是為Vue 2和3服務的一套Vue Composition API的常用工具集，是目前世界上Star最高的同類型庫之一。它的初衷就是將一切原本并不支持響應式的JS API變得支持響應式，省去程序員自己寫相關代碼。

VueUse 是一個基于 Composition API 的實用函數集合。通俗的來說，這就是一個工具函數包，它可以幫助你快速實現(xiàn)一些常見的功能，免得你自己去寫，解決重復的工作內容。以及進行了機遇 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 是一個監(jiān)聽當前鼠標坐標的一個方法，他會實時的獲取鼠標的當前的位置。usePreferredDark 是一個判斷用戶是否喜歡深色的方法，他會實時的判斷用戶是否喜歡深色的主題。useLocalStorage 是一個用來持久化數據的方法，他會把數據持久化到本地存儲中。

還有我們熟悉的防抖和節(jié)流

import { throttleFilter, debounceFilter, useLocalStorage, useMouse } from '@vueuse/core'

// 以節(jié)流的方式去改變 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 函數，這個函數會在點擊元素外部時觸發(fā)一個回調函數。也就是這里的 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。

還還有全局狀態(tài)共享的函數

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

這樣子就是一個簡單的狀態(tài)共享了。擴展一下。傳一個參數，就能改變 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
  },
})