扣丁书屋

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 当中导入了三个函数, useMouseusePreferredDarkuseLocalStorageuseMouse 是一个监听当前鼠标坐标的一个方法,他会实时的获取鼠标的当前的位置。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
  },
})

https://mp.weixin.qq.com/s/wlX0W7LfAtVD2wJu-NTtpw

Vue 新玩具 VueUse

发布于:10月以前  |  533次阅读  |  详细内容 »

从 Vuex 出发,全方位解读状态管理全貌

发布于:10月以前  |  477次阅读  |  详细内容 »

60个Vue常见问题汇总及解决方案

发布于:10月以前  |  478次阅读  |  详细内容 »

9个值得推荐的 VUE3 UI 框架

发布于:10月以前  |  708次阅读  |  详细内容 »

史上最全 Vue 前端代码风格指南

发布于:10月以前  |  456次阅读  |  详细内容 »

Vue3的7种和Vue2的12种组件通信

发布于:10月以前  |  540次阅读  |  详细内容 »

深入浅出 Vue 中的模板编译

发布于:10月以前  |  462次阅读  |  详细内容 »

深入浅出 Vue 响应式原理源码剖析

发布于:10月以前  |  418次阅读  |  详细内容 »

Vue 的完整生命周期源码流程详解

发布于:10月以前  |  438次阅读  |  详细内容 »

12 个 Vue 开发中的性能优化小技巧

发布于:10月以前  |  462次阅读  |  详细内容 »

一次弄懂 Vue2 和 Vue3 的 nextTick 实现原理

发布于:10月以前  |  566次阅读  |  详细内容 »

10 个 Vue3 精华知识点,你知道几个?

发布于:10月以前  |  449次阅读  |  详细内容 »

聊聊vue中的keep-alive

发布于:10月以前  |  556次阅读  |  详细内容 »

万万没想到,Vue3 的 setup 还能这么玩

发布于:10月以前  |  478次阅读  |  详细内容 »

20 个顶级的 Vue 组件库

发布于:10月以前  |  697次阅读  |  详细内容 »

【Vuejs】1148- 关于Vue3实践的一些问题清单

发布于:10月以前  |  562次阅读  |  详细内容 »

基于 Vue3 和 TypeScript 项目大量实践后的思考

发布于:10月以前  |  568次阅读  |  详细内容 »

所属标签

最多阅读

html <table>表数据转 Json 格式 3年以前  |  2913次阅读
element中input的change事件 2年以前  |  2615次阅读
使用 Vue 3.0,你可能不再需要Vuex了 2年以前  |  1879次阅读
VS Code 配置与插件推荐 2019 年版 2年以前  |  1809次阅读
Vue表单支持回车键自动提交 2年以前  |  1620次阅读
koa2入门使用总结 2年以前  |  1615次阅读
Vue如何实现疫情地图展示 2年以前  |  1612次阅读
2020 Vue经典面试题 2年以前  |  1608次阅读

手机扫码阅读