Vue Hooks

@sud-web/vue-hooks 提供管理后台常用的组合式函数（Composables），与 @sud-web/vue-ui 配套使用。

安装

npm install @sud-web/vue-hooks

前置依赖

Hooks 以 Vue 和 @sud-web/vue-ui 作为 peerDependencies，需确保项目中已安装：

npm install vue @sud-web/vue-ui

使用方式

通过子路径按需引入，每个 Hook 独立导出：

import useTablePage from '@sud-web/vue-hooks/useTablePage'
import useDialogOut from '@sud-web/vue-hooks/useDialogOut'
import useModalForm from '@sud-web/vue-hooks/useModalForm'

不支持从包根路径 @sud-web/vue-hooks 统一导入，请始终使用 /useXxx 子路径。

快速示例

一个典型的 CRUD 列表页，三个 Hook 配合使用：

<template>
  <pc-search v-model="query" :form-list="formList" @request="requestTable" />
  <pc-table ref="tableRef" :request-api="fetchList" :req-params="query" :colum-list="columns">
    <template #action="{ row }">
      <el-button @click="dialog.edit(row)">编辑</el-button>
      <el-button @click="dialog.check(row)">查看</el-button>
    </template>
  </pc-table>
  <el-button @click="dialog.add()">新增</el-button>

  <UserModal
    v-model="dialog.visible"
    :row="dialog.row"
    :mode="dialog.mode"
    :disabled="dialog.disabled"
    @confirm="dialog.onConfirm"
    @close="dialog.onClose"
  />
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import useTablePage from '@sud-web/vue-hooks/useTablePage'
import useDialogOut from '@sud-web/vue-hooks/useDialogOut'

const { tableRef, searchRef, requestTable } = useTablePage()

const query = ref({ keyword: '' })
const formList = [{ prop: 'keyword', label: '关键词', type: 'input' }]
const columns = [{ prop: 'name', label: '名称' }, { prop: 'status', label: '状态' }]

function fetchList(params: any) {
  return api.getUserList(params)
}

const dialog = reactive(useDialogOut({
  confirmed: () => requestTable()
}))
</script>

可用 Hooks

Hook	说明	文档
useTablePage	列表页 Hook，管理表格/搜索组件引用与刷新方法	查看
useDialogOut	弹窗外部 Hook，管理弹窗的打开/关闭、模式切换	查看
useModalForm	弹窗内部 Hook，管理表单初始化、校验、提交	查看

典型搭配

列表页 (.vue)
├── useTablePage()       ← 管理 tableRef / searchRef / requestTable
├── useDialogOut()       ← 管理弹窗状态（add / edit / check）
├── <PcSearch />         ← 搜索表单
├── <PcTable />          ← 数据表格
└── <XxxModal />         ← 弹窗子组件
     └── useModalForm()  ← 管理表单初始化 / 校验 / 提交