vueuse

VueUse 是一个基于 Vue 组合式 API 的工具库，里面提供了一系列高效、易用的组合函数，用于简化 Vue 开发，节省开发时间。

Vue官网：https://vueuse.org/

VueUse 主要特点：

1. 丰富的组合函数
2. TS支持
3. 轻量级
4. 良好的文档

VueUse里面有很多的 分类，每个分类下面又有各种丰富的 API：

1. 浏览器 API
   • useFetch：用于发起 HTTP 请求，类似于浏览器的 fetch API。
   • useClipboard：用于操作剪贴板，例如复制文本。
   • useLocalStorage：简化 localStorage 的使用。
   • ......
2. 状态管理
   • useToggle：一个简单的开关状态管理工具。
   • useCounter：用于计数的状态管理工具。
   • .....
3. 传感器
   • useMouse：追踪鼠标的位置和状态。
   • useGeolocation：获取地理位置信息。
4. 用户界面
   • useFullscreen：控制元素的全屏状态。
   • useDark：检测和切换暗模式。
5. 工具函数
   • useDebounce：提供防抖功能。
   • useThrottle：提供节流功能。

基本使用

安装：

npm install @vueuse/core

然后就可以在项目中引入并使用：

<template>
  <div>{{ x }}</div>
  <div>{{ y }}</div>
</template>

<script setup>
import { useMouse } from '@vueuse/core'

const { x, y } = useMouse()
</script>

<style scoped></style>

综合示例：待办事项

要求：用到两个 VueUse 里面的工具方法：useLocalStorage、useToggle

---

-EOF-