橘子

Appearance

On this page

Vue Hooks Plus ​

简介 ​

Vue Hooks Plus 是一个基于 Vue3 Composition API 的 Hooks 库，提供了丰富的 Hooks 来帮助开发者更好地管理状态和副作用。它包含了请求数据、管理状态、处理副作用等多种功能，可以大大提高开发效率和代码质量。

安装 ​

bash
npm install @vueuse/core vue-hooks-plus
# 或
yarn add @vueuse/core vue-hooks-plus
# 或
pnpm add @vueuse/core vue-hooks-plus

基本使用 ​

配置 Vue Hooks Plus ​

在 Vue 应用中设置 Vue Hooks Plus：

typescript
// main.ts
import { createApp } from 'vue'
import { createVhpConfig } from 'vue-hooks-plus'
import App from './App.vue'

const app = createApp(App)

// 配置 Vue Hooks Plus
createVhpConfig({
  // 可选配置
  requestConfig: {
    // 全局请求配置
    manual: false, // 是否手动触发请求
    retryCount: 3, // 失败重试次数
    timeout: 10000, // 超时时间
    pollingInterval: 0, // 轮询间隔时间
  },
})

app.mount('#app')

基本请求 ​

使用 useRequest 钩子发起请求：

vue
<script setup lang="ts">
import { useRequest } from 'vue-hooks-plus'

// 定义获取数据的函数
const fetchUsers = async () => {
  const response = await fetch('https://api.example.com/users')
  if (!response.ok) {
    throw new Error('网络请求失败')
  }
  return response.json()
}

// 使用 useRequest 钩子
const {
  data: users,
  loading,
  error,
  run,
  refresh,
} = useRequest(fetchUsers, {
  // 请求配置
  manual: false, // 自动发起请求
  onSuccess: (result) => {
    console.log('请求成功:', result)
  },
  onError: (error) => {
    console.error('请求失败:', error)
  },
})
</script>

<template>
  <div>
    <h1>用户列表</h1>
    <button @click="refresh">刷新数据</button>

    <div v-if="loading">加载中...</div>
    <div v-else-if="error">加载失败: {{ error?.message }}</div>
    <div v-else>
      <ul>
        <li v-for="user in users" :key="user.id">
          {{ user.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

带参数的请求 ​

vue
<script setup lang="ts">
import { ref } from 'vue'
import { useRequest } from 'vue-hooks-plus'

const userId = ref(1)

const fetchUserById = async (id: number) => {
  const response = await fetch(`https://api.example.com/users/${id}`)
  if (!response.ok) {
    throw new Error('网络请求失败')
  }
  return response.json()
}

// 使用带参数的请求
const {
  data: user,
  loading,
  error,
  run: fetchUser,
} = useRequest(fetchUserById, {
  defaultParams: [userId.value], // 默认参数
  refreshDeps: [userId], // 依赖更新时自动刷新
})

const changeUser = (id: number) => {
  userId.value = id
}
</script>

高级功能 ​

轮询请求 ​

typescript
const { data, loading, run, cancel } = useRequest(fetchUsers, {
  pollingInterval: 3000, // 每 3 秒轮询一次
  pollingWhenHidden: false, // 页面隐藏时暂停轮询
})

// 手动取消轮询
cancel()

防抖与节流 ​

typescript
// 防抖请求
const { data, loading, run } = useRequest(fetchUsers, {
  debounceWait: 300, // 300ms 防抖
})

// 节流请求
const { data, loading, run } = useRequest(fetchUsers, {
  throttleWait: 300, // 300ms 节流
})

缓存与预加载 ​

typescript
// 启用缓存
const { data, loading } = useRequest(fetchUsers, {
  cacheKey: 'users', // 缓存标识
  cacheTime: 300000, // 缓存时间 5 分钟
  staleTime: 0, // 过期时间
})

// 预加载数据
const { data, loading } = useRequest(fetchUsers, {
  cacheKey: 'users',
  preload: true, // 开启预加载
})

并行请求 ​

typescript
import { useRequests } from 'vue-hooks-plus'

const [userRequest, orderRequest] = useRequests([
  {
    requestFn: fetchUsers,
    defaultParams: [],
  },
  {
    requestFn: fetchOrders,
    defaultParams: [],
  },
])

性能优化 ​

请求配置 ​

typescript
const { data, loading } = useRequest(fetchUsers, {
  // 请求配置选项
  refreshOnWindowFocus: true, // 窗口获得焦点时刷新
  focusTimespan: 5000, // 防止频繁刷新
  loadingDelay: 300, // 延迟显示加载状态
  retryCount: 3, // 错误重试次数
  retryInterval: 1000, // 重试间隔
  cacheTime: 300000, // 缓存时间
  staleTime: 0, // 过期时间
  throttleWait: 300, // 节流等待时间
  debounceWait: 300, // 防抖等待时间
})

依赖请求 ​

vue
<script setup lang="ts">
import { ref } from 'vue'
import { useRequest } from 'vue-hooks-plus'

const userId = ref(null)

// 获取用户信息
const { data: user } = useRequest(() => fetchUser(userId.value), {
  ready: !!userId.value, // 只有当 userId 有值时才发起请求
})

// 获取用户订单
const { data: orders } = useRequest(() => fetchUserOrders(userId.value), {
  ready: !!user.value, // 只有当用户信息加载完成后才请求订单
})
</script>

错误处理 ​

全局错误处理 ​

typescript
// main.ts
import { createVhpConfig } from 'vue-hooks-plus'

createVhpConfig({
  requestConfig: {
    // 全局错误处理
    onError: (error) => {
      console.error('请求错误:', error)
      // 可以触发全局错误通知
    },
  },
})

组件级错误处理 ​

vue
<script setup lang="ts">
import { useRequest } from 'vue-hooks-plus'

const { data, loading, error, refresh } = useRequest(fetchUsers, {
  onError: (err) => {
    // 组件级错误处理
    console.error('获取用户失败:', err)
    // 可以显示错误通知或执行其他操作
  },
})
</script>

<template>
  <div>
    <div v-if="error" class="error-banner">
      <p>{{ error?.message || '发生错误' }}</p>
      <button @click="refresh">重试</button>
    </div>

    <!-- 其他内容 -->
  </div>
</template>

与其他库集成 ​

与 Axios 集成 ​

typescript
import axios from 'axios'
import { useRequest } from 'vue-hooks-plus'

// 创建 axios 实例
const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
  },
})

// 在请求中使用 axios
const useUsers = () => {
  return useRequest(() => api.get('/users'), {
    formatResult: (response) => response.data,
  })
}

// 发起 POST 请求
const useCreateUser = () => {
  return useRequest((user) => api.post('/users', user), {
    manual: true, // 手动触发
  })
}

与 Pinia 集成 ​

typescript
// stores/request.ts
import { defineStore } from 'pinia'
import { useRequest } from 'vue-hooks-plus'

export const useRequestStore = defineStore('request', () => {
  // 封装请求 hook
  const useUserRequest = () => {
    return useRequest(() => api.get('/users'), {
      cacheKey: 'users',
      staleTime: 300000, // 5 分钟过期
    })
  }

  // 刷新用户数据
  const refreshUsers = () => {
    const { refresh } = useUserRequest()
    refresh()
  }

  return {
    useUserRequest,
    refreshUsers,
  }
})

要保持清醒 永远不抱有意外的幻想 凭空的期待最要命

Copyright © 2019-2023