当前位置：首页 > news >正文

Vue3 + 组合式 API + 完整可运行的 3 个超级常用通用 Hooks：useRequest、useClipboard、useStorage

news 2026/6/19 16:03:04

1. useRequest —— 统一管理接口请求（最常用）

功能：

自动管理 data /loading/error
支持手动 / 自动执行
支持传参
支持异步函数

// src/hooks/useRequest.ts import { ref, onMounted } from 'vue' export function useRequest<T = any>( apiFn: (...args: any[]) => Promise<T>, options = { immediate: true } ) { const data = ref<T | null>(null) const loading = ref(false) const error = ref<Error | null>(null) const run = async (...args: any[]) => { loading.value = true error.value = null try { const res = await apiFn(...args) data.value = res return res } catch (err) { error.value = err as Error console.error('请求失败：', err) } finally { loading.value = false } } // 立即执行 if (options.immediate) { onMounted(() => run()) } return { data, loading, error, run } }

<script setup lang="ts"> import { useRequest } from '@/hooks/useRequest' // 模拟接口 const getList = () => fetch('/api/list').then(res => res.json()) const { data, loading, error, run } = useRequest(getList) </script> <template> <div v-if="loading">加载中...</div> <div v-else-if="error">请求失败：{{ error.message }}</div> <div v-else>数据：{{ data }}</div> <button @click="run">刷新</button> </template>

2. useClipboard —— 复制到剪贴板

功能：

复制文本
自动提示复制成功状态
兼容所有现代浏览器

// src/hooks/useClipboard.ts import { ref } from 'vue' export function useClipboard() { const copied = ref(false) const copy = async (text: string) => { try { await navigator.clipboard.writeText(text) copied.value = true setTimeout(() => (copied.value = false), 1500) } catch (err) { console.error('复制失败', err) } } return { copy, copied } }

<script setup> import { useClipboard } from '@/hooks/useClipboard' const { copy, copied } = useClipboard() </script> <template> <button @click="copy('我是要复制的内容')"> {{ copied ? '复制成功' : '点击复制' }} </button> </template>

3. useStorage —— 本地存储（localStorage /sessionStorage）

功能：

自动 JSON 序列化 / 反序列化
响应式
支持 localStorage /sessionStorage
支持删除

// src/hooks/useStorage.ts import { ref, watch } from 'vue' type StorageType = 'local' | 'session' export function useStorage<T>( key: string, defaultValue: T, type: StorageType = 'local' ) { const storage = type === 'local' ? localStorage : sessionStorage // 初始化 const read = () => { try { const item = storage.getItem(key) return item ? JSON.parse(item) : defaultValue } catch { return defaultValue } } const data = ref<T>(read()) // 监听变化自动保存 watch( data, (val) => { storage.setItem(key, JSON.stringify(val)) }, { deep: true } ) // 删除 const remove = () => { storage.removeItem(key) data.value = defaultValue } return { data, remove } }

<script setup> import { useStorage } from '@/hooks/useStorage' // 存 localStorage const { data: userInfo, remove } = useStorage('userInfo', { name: '张三' }) // 存 sessionStorage // const { data } = useStorage('token', '', 'session') </script> <template> <div>{{ userInfo.name }}</div> <button @click="userInfo.name = '李四'">修改</button> <button @click="remove">删除</button> </template>

// src/hooks/useModal.ts import { ref } from 'vue' export function useModal(initVisible = false) { const visible = ref(initVisible) const open = () => (visible.value = true) const close = () => (visible.value = false) const toggle = () => (visible.value = !visible.value) return { visible, open, close, toggle } }

查看全文

http://www.gsyq.cn/news/1356098.html