vue-3-composables - SKILL.md Agent Skill

id: eng-vue-composables name: Vue 3 组合式函数最佳实践 (Composables) category: engineering description: 提供标准化的 useTable, useRequest 等 Hooks，用于简化列表页和异步请求的逻辑复用。 tags: [vue3, composables, hooks, useTable] updated_at: 2026-01-09

Vue 3 组合式函数最佳实践

为了避免在每个页面重复编写分页、Loading 和请求逻辑，我们推荐使用 Composables。

1. useTable (列表页神器)

封装了分页、加载状态、数据获取的通用逻辑。一行代码搞定所有表格逻辑。

使用方式：

const { loading, data, pagination, handlePageChange, handleLimitChange } = useTable(getHostList);

配合 bk-table：

<bk-table
  :data="data"
  :pagination="pagination"
  v-bkloading="{ isLoading: loading }"
  remote-pagination
  @page-change="handlePageChange"
  @page-limit-change="handleLimitChange"
>
  <bk-table-column prop="name" label="名称" />
</bk-table>

📦 获取完整 Hook 实现：skill://vue-composables/assets/useTable.ts

📦 可用资源

skill://vue-composables/assets/useTable.ts

根据 SKILL.md 中的 IF-THEN 规则判断是否需要加载