VueUse-----基于 Vue 3 的实用工具库，常用功能介绍及使用案例

news2024/9/30 17:18:55

简介

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>