Composables

本项目提供以下组合式函数，用于封装和复用有状态的逻辑。

📖 基础概念参见 Vue 官方文档 - Composables

分类索引

实时通信

Composable	说明	文档
useSse	SSE 长连接（Server-Sent Events）	查看
useDictSync	字典数据同步	查看
useOnlineCount	在线人数统计	查看

表格工具

Composable	说明	文档
useTableSelection	表格选择管理	查看

布局相关

布局相关的 Composables 位于 src/layouts/useLayout.ts：

Composable	说明
useLayout	布局管理（侧边栏、设备检测等）

使用方式

基本用法

<script setup lang="ts">
import { useSse, useDictSync, useOnlineCount } from '@/composables'

// SSE 长连接
const { connect, disconnect } = useSse()

// 字典同步
const { startSync, stopSync } = useDictSync()

// 在线人数
const { onlineCount } = useOnlineCount()

onMounted(() => {
  connect()
  startSync()
})

onUnmounted(() => {
  disconnect()
  stopSync()
})
</script>

组合使用

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

const { 
  selectedIds, 
  selectedRows, 
  handleSelectionChange,
  clearSelection 
} = useTableSelection()

// 表格选择变化时
const onSelectionChange = (rows: any[]) => {
  handleSelectionChange(rows)
}

// 批量删除
const handleBatchDelete = () => {
  if (selectedIds.value.length === 0) {
    ElMessage.warning('请选择要删除的数据')
    return
  }
  // 执行删除...
}
</script>

项目导出

// src/composables/index.ts
export { useSse, useDictSync, useOnlineCount } from "./sse";
export { useAiAction } from "./ai/useAiAction";
export { useTableSelection } from "./table/useTableSelection";

相关文档

• Vue 3 组合式 API
• 组件总览
• 实时通信专题