VueUse常用方法整理

VueUse 是一个为 Vue 3 提供的组合式 API 库，含有许多非常实用的方法，可以帮助开发者更高效地处理常见的功能需求。以下是一些常用的 VueUse 方法及其简要说明：

1. useFetch

useFetch 是一个用于简化数据获取的功能，可以处理 GET、POST 等 HTTP 请求。

import { useFetch } from '@vueuse/core';

const { data, isFetching, error } = useFetch('https://api.example.com/data').json();

2. useLocalStorage

useLocalStorage 用于创建一个响应式的本地存储变量，可以自动同步值到浏览器的 Local Storage。

import { useLocalStorage } from '@vueuse/core';

const name = useLocalStorage('name', 'John Doe');

3. useSessionStorage

与 useLocalStorage 类似，不同的是 useSessionStorage 使用的是 Session Storage。

import { useSessionStorage } from '@vueuse/core';

const sessionToken = useSessionStorage('session-token', '');

4. useEventListener

useEventListener 用于添加 DOM 事件监听器，并在组件卸载时自动清除。

import { ref } from 'vue';
import { useEventListener } from '@vueuse/core';

const mouseX = ref(0);
const mouseY = ref(0);

useEventListener('mousemove', (event) => {
    mouseX.value = event.clientX;
    mouseY.value = event.clientY;
});

5. useMouse

useMouse 用于获取鼠标的当前位置，并提供 x 和 y 的位置。

import { useMouse } from '@vueuse/core';

const { x, y } = useMouse();

6. useInterval

useInterval 用于设置定时器，执行频繁的任务。

import { ref } from 'vue';
import { useInterval } from '@vueuse/core';

const count = ref(0);
useInterval(() => {
    count.value++;
}, 1000); // 每秒增加一次

7. useTimeout

useTimeout 用于设置延迟执行的任务。

import { ref } from 'vue';
import { useTimeout } from '@vueuse/core';

const message = ref('Hello!');
useTimeout(() => {
    message.value = 'Goodbye!';
}, 2000); // 2 秒后修改 message

8. useCopyToClipboard

useCopyToClipboard 用来将内容复制到剪贴板。

import { ref } from 'vue';
import { useCopyToClipboard } from '@vueuse/core';

const clipboardText = ref('Some text to copy');
const { copy } = useCopyToClipboard();

function copyText() {
    copy(clipboardText.value);
}

9. useWindowSize

useWindowSize 提供窗口的宽度和高度的响应式值。

import { useWindowSize } from '@vueuse/core';

const { width, height } = useWindowSize();

10. useMediaQuery

useMediaQuery 用于响应式地处理媒体查询，可以监控特定的 CSS 媒体查询条件。

import { useMediaQuery } from '@vueuse/core';

const isWideScreen = useMediaQuery('(min-width: 1024px)');

11. usePromise

usePromise 用于处理 Promise 的状态（例如 pending、resolved 和 rejected）。

import { usePromise } from '@vueuse/core';

const { isLoading, data, error } = usePromise(async () => {
    // 执行异步操作
    const response = await fetch('https://api.example.com/data');
    return response.json();
});

12. useScroll

useScroll 用于获取页面滚动位置并提供响应式值。

import { useScroll } from '@vueuse/core';

const { y } = useScroll();