Yun Tools

基于 VueUse 的 Vue 3 工具库，提供常用的工具函数和 Hooks。

安装

pnpm add @yun-fe/yun-tools

特性

• 🚀 基于 VueUse 构建，性能优异
• 📦 Tree-shakable，按需引入
• 💪 完整的 TypeScript 支持
• 🎯 统一的 API 设计

使用

工具函数

import {
  // 防抖节流
  createDebounceFn,
  createThrottleFn,
  debounce,
  throttle,

  // 存储
  createLocalStorage,
  createSessionStorage,
  setLocalStorage,
  getLocalStorage,

  // 文件下载
  downloadFile,
  triggerFileDownload,

  // 验证
  isEmail,
  isMobile,
  isURL,

  // API 转换
  transformApi,
} from "@yun-fe/yun-tools";

// 防抖
const debouncedFn = createDebounceFn(() => {
  console.log("搜索");
}, 300);

// 节流
const throttledFn = createThrottleFn(() => {
  console.log("滚动");
}, 300);

// 响应式存储
const token = createLocalStorage("token", "");
token.value = "new-token"; // 自动同步到 localStorage

// 纯函数存储
setLocalStorage("user", { name: "John" });
const user = getLocalStorage("user");

Hooks

import {
  useCounter,
  useToggleState,
  useBooleanState,
  useArray,
  useObject,
  useLoading,
  usePagination,
} from "@yun-fe/yun-tools/hooks";

// 或者从 yun-hooks 导入（推荐）
import { useCounter } from "yun-hooks";

// 计数器
const { count, inc, dec, reset, double } = useCounter(0);
inc(); // count.value = 1
dec(); // count.value = 0

// 布尔值切换
const [visible, toggle] = useToggleState(false);
toggle(); // visible.value = true

// 数组管理
const { list, push, remove, clear } = useArray([1, 2, 3]);
push(4); // [1, 2, 3, 4]

// 加载状态
const { loading, withLoading } = useLoading();
await withLoading(async () => {
  await fetchData();
});

// 分页
const { page, pageSize, total, setPage, nextPage, prevPage } = usePagination();
setPage(2);
nextPage();

API 文档

防抖和节流

createDebounceFn

创建防抖函数，基于 VueUse 的 useDebounceFn。

const debouncedFn = createDebounceFn(fn, delay, options);

createThrottleFn

创建节流函数，基于 VueUse 的 useThrottleFn。

const throttledFn = createThrottleFn(fn, delay, options);

存储

createLocalStorage

创建响应式的 localStorage。

const token = createLocalStorage<string>("token", "");
token.value = "new-token"; // 自动同步

createSessionStorage

创建响应式的 sessionStorage。

const tempData = createSessionStorage<object>("temp", {});

Hooks

useCounter

计数器 Hook。

const { count, inc, dec, set, reset, double } = useCounter(0);

useArray

数组状态管理。

const { list, push, remove, clear, filter } = useArray<number>([]);

useLoading

加载状态管理。

const { loading, startLoading, stopLoading, withLoading } = useLoading();

usePagination

分页状态管理。

const { page, pageSize, total, totalPages, setPage, nextPage, prevPage } = usePagination(1, 10);

License

MIT