# @r-utils/vue3

仅用于 Vue3 项目的工具包，提供 class 处理、组件事件派发和常用组合式 Hooks。

## 适用范围

- 适用于 Vue3 项目。
- 适用于需要复用 Vue3 class 处理、列表加载、表单输入值处理等能力的项目。

## 不适用范围

- 不适用于 Vue2 项目。
- 如果是 uni-app 专用能力，建议优先使用 `@r-utils/uni-app`。

## 安装

```bash
pnpm add @r-utils/vue3
```

## 导入方式

### 推荐：根入口导入

大多数场景推荐从根入口导入，路径简单，使用心智负担更低。

```ts
import {
  mergeClass,
  dispatch,
  useLoadMore,
  useTimer,
  useValueOfRule,
} from "@r-utils/vue3";
```

### 兼容：子路径导入

如果你希望模块边界更清晰，也可以使用子路径导入。两种方式都支持。

```ts
import { mergeClass } from "@r-utils/vue3/vue-helper";
import { useLoadMore } from "@r-utils/vue3/hooks/list";
import { useTimer, useValueOfRule } from "@r-utils/vue3/hooks/utils";
```

## 导出模块

| 子路径 | 说明 |
| --- | --- |
| `@r-utils/vue3/vue-helper` | Vue class 合并、转换和祖先组件事件派发 |
| `@r-utils/vue3/hooks/list` | 列表分页加载 Hook |
| `@r-utils/vue3/hooks/utils` | 常用组合式工具 Hook |

## 使用示例

### 合并 class

```ts
import { mergeClass } from "@r-utils/vue3";

const cls = mergeClass("btn", ["btn-primary"], { active: true });
```

### 列表加载

```ts
import { useLoadMore } from "@r-utils/vue3";

const listState = useLoadMore(async (pageNum, pageSize) => {
  return {
    total: 100,
    list: await fetchList(pageNum, pageSize),
  };
});

await listState.loadMore();
```

### 子路径导入 Hook

```ts
import { useTimer } from "@r-utils/vue3/hooks/utils";

const timer = useTimer(60);
timer.start();
```

## 注意事项

- 推荐优先使用根入口导入；如果需要更精确的模块边界，也可以使用子路径导入。
- 本包依赖 Vue3，请确保业务项目已安装兼容版本的 `vue`。