# @formkit/inertia 中文文档

规范地址：https://npmcn.com/package/%40formkit/inertia/

版本：0\.1\.5
npm 元数据更新时间：2025-11-11T18:52:36.422Z
中文译文更新时间：2026-11-15T09:11:39.761Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40formkit/inertia
原文对照：https://npmcn.com/package/%40formkit/inertia/?lang=original
项目主页：https://github.com/formkit/inertia#readme
源码仓库：https://github.com/formkit/inertia

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：53.1 kB，9 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：vue \>= 3\.0\.0，@formkit/vue \>= 1\.2\.0，@inertiajs/vue3 \>= 1\.0\.0
- 首次发布：2023-10-30T21:24:03.070Z
- 最新版本发布：2023-11-10T16:16:25.341Z
- 近 30 天下载量：4874（2026-10-16 至 2026-11-14，npm 官方下载统计）
- 已发布版本数：5（近 12 个月 0 个）

## 中文简介

表Kit + Inertia = ❤️

## 安装

```sh
npm install @formkit/inertia
```

也可以使用：`pnpm add @formkit/inertia`、`yarn add @formkit/inertia`、`bun add @formkit/inertia`

## README

# 内置插件

 [![GitHub Build Status](https://github.com/formkit/inertia/actions/workflows/ci.yml/badge.svg "Build Badge")](https://github.com/formkit/inertia/actions/workflows/ci.yml)[![Npm Version](https://img.shields.io/npm/v/@formkit/inertia "Npm Version") ](https://www.npmjs.com/package/@formkit/inertia)[![Npm Version](https://img.shields.io/github/license/formkit/inertia "Npm Version")](https://github.com/formkit/inertia/blob/main/LICENSE.txt)

这个 `@formkit/inertia` 插件旨在将 Inertia.js 与 FormKit 格式无缝地整合,利用一个强大的事件系统来利用 Inertia.js 事件召回和 FormKit 插件来进行平滑而强大的网络开发体验.

### 目录

1.  [安装](https://npmcn.com/package/%40formkit/inertia/#readme-installation)
2.  [使用量](https://npmcn.com/package/%40formkit/inertia/#readme-usage)
3.  [加词](https://npmcn.com/package/%40formkit/inertia/#readme-addons)
4.  [路线图](https://npmcn.com/package/%40formkit/inertia/#readme-roadmap)
5.  [类型](https://npmcn.com/package/%40formkit/inertia/#readme-types)

## 安装

要使用 Inertia 插件, 我们需要安装和运行 Inertia Vue. JS 的 Laravel 工程, 您可以通过查看指南的第一部分来检查 [使用带有 Laravel Inertia 的窗体Kit](https://formkit.com/guides/using-formkit-with-laravel-inertia)。 。 。 .

现在,您可以使用您首选的软件包管理器安装 :

```bash
npm install @formkit/inertia
```

## 使用量

要使用 Inertia 插件,我们需要导入 `useForm` 函数从 `@formkit/inertia`,叫 `useForm` 函数以接收 `form`,它与Inertia的方法调用,反应状态,用于扩展的加通,以及FormKit插件相接.

这个 `useForm` 函数为您通过插件传递到窗体的初始字段选择一个参数,它也会像返回方法 `submit`, (中文(简体) ), `get`, (中文(简体) ), `post`, (中文(简体) ), `put`, (中文(简体) ), `patch` 财务报告和审定财务报表 `delete`。所有这些方法将返回一个合适的功能,作为FormKit的功能 `@submit` 处理者.

使用它的最简单方式是创建一个新的 `const` 并添加 `form.plugin` 到窗体Kit表单 `:plugins`数字 :

```html
<script setup lang="ts">
  import { useForm } from '@formkit/inertia'

  const form = useForm()
  const submitHandler = form.post('/login')
</script>

<template>
  <FormKit type="form" @submit="submitHandler" :plugins="[form.plugin]">
    <FormKit type="text" name="username" label="Username" />
    <FormKit type="password" name="password" label="Password" />
  </FormKit>
</template>
```

您也可以在模板中直接定义处理器 :

```html
<FormKit
  type="form"
  @submit="(fields, node) => form.post('/login')(fields, node)"
  :plugins="[form.plugin]"
>
  <!-- The rest of your form -->
</FormKit>
```

函数支持所有 [访问选项](https://inertiajs.com/manual-visits) 从Inertia,例如 `preserveState`, (中文(简体) ), `preserveScroll`,和事件召回.

> 这个 `options` 事件召回会覆盖该特定事件的任何默认事件, 这意味着如果您添加 `onStart` 你会失去事件 从 `start` 例如装入、拆卸和加工.

```html
<FormKit
  type="form"
  @submit="(fields, node) => form.post('/login', {
    preserveScroll: true,
    onSuccess: () => form.node.reset(),
  })(fields, node)"
  :plugins="[form.plugin]"
>
  <!-- The rest of your form -->
</FormKit>
```

要取消提交的表格,请使用 `cancel()` 方法.

```html
<FormKit
  type="form"
  @submit="(fields, node) => form.post('/login')(fields, node)"
  :plugins="[form.plugin]"
>
  <!-- The rest of your form -->
</FormKit>

<FormKit type="button" @click="form.cancel()" label="Cancel" />
```

(单位:千美元)[返回顶端](https://npmcn.com/package/%40formkit/inertia/#readme-top)(中文(简体) )

这个 `useForm()` 可堆叠还返回反应状态。 伊诺蒂亚是: `processing`, (中文(简体) ), `progress`, (中文(简体) ), `recentlySuccessful` 财务报告和审定财务报表 `wasSuccessful`,基于FormKit 的系统是 `valid`, (中文(简体) ), `errors`, (中文(简体) ), `dirty` 财务报告和审定财务报表 `node`。例如,你可以使用 `processing` 状态,以便在Inertia处理表单时禁用表单提交按钮(假设您正在使用自己的提交按钮) :

```html
<template>
  <FormKit type="form" @submit="submit" :plugins="[form.plugin]">
    <FormKit type="text" name="username" label="Username" />
    <FormKit type="password" name="password" label="Password" />

    <template #submit>
      <FormKit type="submit" label="Log in" :disabled="form.processing" />
    </template>
  </FormKit>
</template>
```

(单位:千美元)[返回顶端](https://npmcn.com/package/%40formkit/inertia/#readme-top)(中文(简体) )

## 加词

扩展功能的主要功能是传递附加到 `addon()`,这样你就可以瞄准多个事件 当那些被Inertia事件召回系统调用时,将会被触发, `addon()` 接受函数或数组函数 `on()`,它接受任何来自Inertia事件召回的事件(没有 `on` 前缀),具体指: `before`, (中文(简体) ), `start`, (中文(简体) ), `progress`, (中文(简体) ), `success`, (中文(简体) ), `error`, (中文(简体) ), `cancel`, (中文(简体) ), `cancelToken` 财务报告和审定财务报表 `finish`。转发给您的调用参数是Inertia事件的调用参数,然后FormKit的节点:

```html
<script setup lang="ts">
  import { useForm } from '@formkit/inertia'

  const form = useForm()
  form.addon((on) => {
    on('before', (visit, node) => {
      return confirm('Are you sure you want to delete this user?')
    })

    on('success', (page, node) => {
      toast('User deleted.')
    })
  })
</script>
```

如果您需要单个事件召回 `useForm()` ưμ㼯a `on()` 直接 :

```html
<script setup lang="ts">
  import { useForm } from '@formkit/inertia'

  const form = useForm()
  form.on('before', (visit, node) => {
    return confirm('Are you sure you want to delete this user?')
  })
</script>
```

(单位:千美元)[返回顶端](https://npmcn.com/package/%40formkit/inertia/#readme-top)(中文(简体) )

## 路线图

-   [x] 做一个 `success` 财务报告和审定财务报表 `error` 能够返回的事件 a `Promise<void>` 以延后呼叫 `finish` 事件
-   [ ] 添加对支持 [拉维尔识别](https://laravel.com/docs/10.x/precognition)

(单位:千美元)[返回顶端](https://npmcn.com/package/%40formkit/inertia/#readme-top)(中文(简体) )

## 类型

`useForm`

```ts
export const useForm: <F extends RequestPayload>(initialFields?: F | undefined) => {
  on: <T extends "before" | "start" | "progress" | "finish" | "cancel" | "success" | "error" | "cancelToken">(name: T, cb: EventCallback[T]) => void;
  addon: (addons: AddonExtension | AddonExtension[]) => void;
  plugin: (node: FormKitNode) => false | undefined;
  node: Ref<FormKitNode | null>;
  dirty: Ref<boolean | null>;
  errors: Ref<boolean | null>;
  valid: Ref<boolean | null>;
  processing: Ref<boolean>;
  progress: Ref<number>;
  recentlySuccessful: Ref<boolean>;
  wasSuccessful: Ref<boolean>;
  submit: (method: Method, url: URL | string, options?: Exclude<VisitOptions, 'method' | 'data'>) => (data: F, node: FormKitNode) => void;
  get: (url: URL | string, options?: Exclude<VisitOptions, 'method' | 'data'>) => (data: F, node: FormKitNode) => void;
  post: (url: URL | string, options?: Exclude<VisitOptions, 'method' | 'data'>) => (data: F, node: FormKitNode) => void;
  put: (url: URL | string, options?: Exclude<VisitOptions, 'method' | 'data'>) => (data: F, node: FormKitNode) => void;
  patch: (url: URL | string, options?: Exclude<VisitOptions, 'method' | 'data'>) => (data: F, node: FormKitNode) => void;
  delete: (url: URL | string, options?: Exclude<VisitOptions, 'method' | 'data'>) => (data: F, node: FormKitNode) => void;
  cancel: () => void;
}
```
`AddonExtension`

```ts
export type AddonExtension = (on: ReturnType<typeof createEventManager>['on']) => void;
```

(单位:千美元)[返回顶端](https://npmcn.com/package/%40formkit/inertia/#readme-top)(中文(简体) )

## 常见问题

### @formkit/inertia 是什么？

表Kit \+ Inertia = ❤️

### 如何安装 @formkit/inertia？

在项目目录运行 npm install @formkit/inertia，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：vue（\>= 3\.0\.0）、@formkit/vue（\>= 1\.2\.0）、@inertiajs/vue3（\>= 1\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @formkit/inertia 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @formkit/inertia 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @formkit/inertia 可以商用吗？

@formkit/inertia 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @formkit/inertia 的下载量有多少？

根据 npm 官方下载统计，@formkit/inertia 在 2026/10/16 – 2026/11/14 这 30 天内被下载 4,874 次，日均约 162 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @formkit/inertia 还在维护吗？

最新版本 0\.1\.5 发布于 2023/11/11（3 年前）；至今共发布 5 个版本，其中过去 12 个月发布了 0 个；首次发布于 2023/10/31。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。