Composables 总览

Composables 是 Vue 3 组合式 API 的核心概念，用于封装和复用有状态的逻辑。

什么是 Composables？

Composables 是利用 Vue 3 组合式 API 来封装和复用有状态逻辑的函数。

特点：

• 以 use 开头命名
• 返回响应式的状态和方法
• 可以在组件的 setup() 中使用
• 支持组合和嵌套使用

Composables 分类

认证相关

Composable	说明	文档
useTokenRefresh	Token 自动刷新	查看

布局相关

Composable	说明	文档
useLayout	布局管理	查看
useLayoutMenu	菜单管理	查看
useDeviceDetection	设备检测	查看

WebSocket 相关

Composable	说明	文档
useStomp	STOMP 协议 WebSocket	查看
useDictSync	字典数据同步	查看
useOnlineCount	在线人数统计	查看

工具函数

Composable	说明	文档
useAiAction	AI 操作助手	查看
useTableSelection	表格选择管理	查看

使用方式

基本用法

<script setup lang="ts">
import { useTokenRefresh } from '@/composables'

const { startRefresh, stopRefresh } = useTokenRefresh()

onMounted(() => startRefresh())
onUnmounted(() => stopRefresh())
</script>

组合使用

<script setup lang="ts">
import { useLayout, useLayoutMenu } from '@/composables'

const { device, sidebar } = useLayout()
const { activeMenu } = useLayoutMenu()

watchEffect(() => {
  if (device.value === 'mobile') {
    sidebar.opened = false
  }
})
</script>

创建自定义 Composable

// composables/useCounter.ts
import { ref, computed } from 'vue'

export function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  const double = computed(() => count.value * 2)

  function increment() {
    count.value++
  }

  function decrement() {
    count.value--
  }

  return {
    count,
    double,
    increment,
    decrement
  }
}

最佳实践

1. 命名规范

• 使用 use 前缀
• 使用驼峰命名
• 名称清晰表达功能

2. 单一职责

每个 Composable 只负责一个功能

3. 类型定义

提供完整的 TypeScript 类型

4. 副作用清理

确保清理事件监听等副作用

相关文档

• Vue 3 组合式 API
• 组件文档