第十一章：修改数据 —— `action` - 现代前后端完全指南：软件城市宇宙

只读不写，不叫应用。写数据时，Solid Router / SolidStart 推荐用 action。

tsx

import { action } from "@solidjs/router";

const createShopAction = action(async (formData: FormData) => {
  "use server";

  const name = formData.get("name")?.toString() ?? "";
  await db.shop.create({ name });
}, "createShop");

然后直接接表单：

tsx

export default function NewShopPage() {
  return (
    <form action={createShopAction} method="post">
      <input name="name" placeholder="店铺名" />
      <button type="submit">创建</button>
    </form>
  );
}

这里非常关键的一点是：

这不是“看起来像普通表单”，它本来就是真表单。

好处是：

JavaScript 还没加载也能工作
渐进增强友好
提交语义天然清晰
不必所有 mutation 都手写 fetch

如果你不是表单场景，也可以程序化触发：

tsx

import { action, useAction } from "@solidjs/router";

const markClosed = action(async (id: string) => {
  "use server";
  await db.shop.close(id);
}, "markClosed");

function CloseButton(props: { id: string }) {
  const run = useAction(markClosed);

  return <button onClick={() => run(props.id)}>歇业</button>;
}