【Vue学习笔记6】好用的 Vueuse 工具包

news2024/12/26 3:00:02

1. 安装Vueuse

VueUse 的官方（https://vueuse.org/）的介绍说这是一个 Composition API 的工具集合，适用于 Vue 2.x 或者 Vue 3.x，用起来和 React Hooks 还挺像的。

VueUse 插件的安装

npm install @vueuse/core

2. 实现全屏功能

pages文件夹中新建vueuse.vue文件，内容如下：

<template>
    <h1 @click="toggle">切换</h1>
</template>

<script setup>
import { useFullscreen } from '@vueuse/core'
const { isFullscreen, enter, exit, toggle } = useFullscreen();
</script>

在router/index.js中配置路由：

...
import Toggle from "../pages/fullScreen.vue"
const routes = [
    ...
    ,{
        path: "/toggle",
        name: "Toggle",
        component: Toggle
    }
    ]

在App.vue中配置组件

    <router-link to="/toggle">切换</router-link>

点击“切换”可以进入全屏和退出全屏。
在这里插入图片描述
useFullscreen 的封装逻辑和 useStorage 类似，都是屏蔽了浏览器的操作，把所有我们需要用到的状态和数据都用响应式的方式统一管理，VueUse 中包含了很多我们常用的工具函数，我们可以把网络状态、异步请求的数据、动画和事件等功能，都看成是响应式的数据去管理。

3. 鼠标位置

修改vueuse.vue文件，引入useMouse

<template>
    <h1 @click="toggle">切换</h1>
    <h1>鼠标位置：{{ x }} * {{ y }}</h1>
</template>

<script setup>
import { useMouse, useFullscreen } from '@vueuse/core'
const { toggle } = useFullscreen();
const { x, y } = useMouse();
</script>

移动鼠标，则会显示鼠标当前的坐标。
在这里插入图片描述

4. 自动计数

修改vueuse.vue文件，引入useInterval

<template>
    <h1 @click="toggle">切换</h1>
    <h1>鼠标位置：{{ x }} * {{ y }}</h1>
    <h1>Interval fired: {{ counter }}</h1>
    <button @click="pause">暂停</button>
    <button @click="resume">恢复</button>
</template>

<script setup>
import { useMouse, useFullscreen, useInterval } from '@vueuse/core'
const { toggle } = useFullscreen();
const { x, y } = useMouse();
const { counter, pause, resume } = useInterval(200,{controls:true})
</script>