简介
VueUse 是一个基于 Vue 3 的实用工具库，它提供了一系列的组合式 API（Composition API）函数，可以帮助你更方便地处理常见的任务。VueUse 包含了大量的功能，如状态管理、浏览器 API 封装、响应式数据处理等。
安装 VueUse
可以通过 npm 或 yarn 来安装 VueUse：
npm install @vueuse/core
# 或者
yarn add @vueuse/core常用功能示例
以下是一些 VueUse 中常用的功能示例：
1. 使用 useFetch 进行 HTTP 请求
useFetch 可以简化 HTTP 请求的处理，并且可以与 Composition API 很好地集成。
<script setup lang="ts">
import { ref } from 'vue';
import { useFetch } from '@vueuse/core';const { data, error, isFetching } = useFetch('https://api.example.com/data');const fetchData = async () => {if (isFetching.value) return;await data.value; // 等待数据加载完成console.log(data.value);
};if (error.value) {console.error('Fetch Error:', error.value);
}
</script><template><div><button @click="fetchData" :disabled="isFetching">获取数据</button><p v-if="data">数据: {{ data }}</p><p v-else-if="isFetching">正在加载...</p><p v-else-if="error">加载失败: {{ error.message }}</p></div>
</template>2. 使用 useStorage 进行本地存储
useStorage 可以帮助你轻松地在浏览器的 localStorage 或 sessionStorage 中存储和读取数据。
<script setup lang="ts">
import { useStorage } from '@vueuse/core';const name = useStorage('user-name', '');
</script><template><div><input v-model="name" placeholder="输入你的名字" /><p>你好, {{ name }}!</p></div>
</template>3. 使用 useMouse 获取鼠标位置
useMouse 可以帮助你获取当前鼠标的位置。
<script setup lang="ts">
import { useMouse } from '@vueuse/core';const { x, y } = useMouse();
</script><template><div><p>鼠标位置: X: {{ x }}, Y: {{ y }}</p></div>
</template>4. 使用 useWindowSize 获取窗口大小
useWindowSize 可以帮助你获取当前窗口的大小，并且是响应式的。
<script setup lang="ts">
import { useWindowSize } from '@vueuse/core';const { width, height } = useWindowSize();
</script><template><div><p>窗口大小: 宽度: {{ width }}, 高度: {{ height }}</p></div>
</template>5. 使用 useDark 切换暗黑模式
useDark 可以帮助你切换页面的暗黑模式。
<script setup lang="ts">
import { useDark, useToggle } from '@vueuse/core';const isDark = useDark();
const toggleDark = useToggle(isDark);
</script><template><div><button @click="toggleDark">切换暗黑模式</button><p v-if="isDark">当前是暗黑模式</p><p v-else>当前是亮色模式</p></div>
</template>更多功能
VueUse 提供了非常多的功能，包括但不限于：
- 状态管理：
useState,useAsyncState - DOM 操作：
useElementSize,useElementVisibility - 事件处理：
useEventListener,useIntervalFn - 设备信息：
useDeviceMotion,useDeviceOrientation - 动画：
useTransition,useSpring - 网络状态：
useOnline - 剪贴板操作：
useClipboard
官方文档地址
你可以访问 VueUse 官方文档 获取更多详细信息和示例。