用Emergent框架5分钟可搭建增删改查、带状态标记的待办应用：初始化项目后定义Todo模型（id须为string），创建Todos页面并用useCollection管理数据，通过内置API实现新增、完成切换和删除，所有操作自动持久化到localStorage。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你需要快速搭建一个能增删改查、带状态标记的待办事项应用，不写后端、不配服务器，用Emergent这个轻量级低代码框架5分钟内跑起来。
初始化Emergent项目
打开终端，执行 npm create emergent@latest，按提示输入项目名（比如 todo-app），选择 blank 模板，回车确认。
进入项目目录：cd todo-app，运行 npm run dev，浏览器自动打开 https://www.php.cn/link/2d16ef569bb8d2fddf2e9b279f73e7f8，看到“Welcome to Emergent”即初始化成功。
定义待办事项数据模型
在 src/models/ 下新建文件 Todo.ts，写入以下内容：
export interface Todo {<br> id: string;<br> text: string;<br> done: boolean;<br> createdAt: Date;<br>}
注意：字段名必须与后续组件中使用的属性名完全一致，【id 必须是 string 类型，不能用 number，否则 Emergent 的内置列表操作会失效】。
创建待办事项列表页面
在 src/pages/ 下新建 Todos.page.tsx，粘贴以下代码：
import { useCollection } from 'emergent';<br>import { Todo } from '@/models/Todo';<br><br>export default function Todos() {<br> const todos = useCollection<todo>('todos');<br> return (<br> <div>
<br> <h1>我的待办事项</h1>
<br> {todos.items.map(todo => (<br> <div key="{todo.id}">{todo.text} {todo.done ? '✅' : '⬜'}</div>
<br> ))}<br> </div>
<br> );<br>}</todo>
这一步不需要手动注册路由——Emergent 会自动把 .page.tsx 文件映射为路由，访问 /todos 即可看到空列表。
添加新增待办功能
方法一：使用 Emergent 内置表单组件
在 Todos.page.tsx 的 return 中 {todos.items.map(...)} 上方插入：
<form onsubmit="{todos.create}">
<br> <input name="text" placeholder="输入新任务" required><br> <button type="submit">添加</button><br>
</form>
方法二：手写逻辑调用
替换上面的 form，改用：const [newText, setNewText] = useState('');<br>const handleAdd = () => {<br> if (!newText.trim()) return;<br> todos.create({ text: newText, done: false, createdAt: new Date(), id: crypto.randomUUID() });<br> setNewText('');<br>};<br>...<br><input value="{newText}" onchange="{e"> setNewText(e.target.value)} /><br><button onclick="{handleAdd}">添加</button>
两种方式都能触发数据持久化，但方法一更简短；方法二适合需要校验或联动其他状态的场景。
实现完成/删除操作
第一步：为每条待办添加操作按钮
修改 todos.items.map 内部的 JSX，把原来那行替换成：
<div key="{todo.id}">
<br> {todo.text} {todo.done ? '✅' : '⬜'}<br> <button onclick="{()"> todos.update(todo.id, { done: !todo.done })}>{todo.done ? '还原' : '完成'}</button><br> <button onclick="{()"> todos.delete(todo.id)}>删除</button><br>
</div>
第二步：确保 update 和 delete 能响应式更新 UI
Emergent 的 useCollection 默认启用实时同步，只要后端（此处是内置内存数据库）返回成功，视图立即刷新，无需手动 setState 或重新 fetch。
第三步：测试删除行为
点击“删除”后该条目从 DOM 消失，且刷新页面也不会重现——因为 【Emergent 默认将 collection 数据持久化到 localStorage，关掉浏览器再打开依然存在】。
