大家好，我是程序员柏风，AI 最全的 Vibecoding 学习地图 http://coderoadmap.cn 作者。

综合练习

这一课你将能做到

独立完成「Todo + Router + Pinia + 三态 fetch」迷你应用并 npm run build 通过
用自己的话写一段 Vue 与 React 实现同一 Todo 的差异（200 字级）
明确收官后：Vue 路线图可打勾，本站主产品代码仍回 Next/React

为什么要学

零件课过完不等于会组装。综合练习强迫你做选择：状态放组件还是 Pinia、详情要不要独立路由、列表要不要远程加载。
做完后，读 Element Admin 一类项目会轻松很多。

先建立图像

/                列表 + 筛选 + 新增（Pinia）
/todo/:id        详情编辑
可选 /api/todos  初始加载（三态）
localStorage     持久化
npm run build    验收

验收项	标准
路由	直达 `/todo/1` 不白屏
状态	刷新后列表仍在（若做了持久化）
远程	有 loading/error（若接 API）
构建	`build` 成功

跟着做

步骤 1：搭路由

routes: [
  { path: "/", component: TodoList },
  { path: "/todo/:id", component: TodoDetail },
]

App.vue 放导航与 RouterView。

步骤 2：Pinia store

沿用 pinia 课骨架：items/filter/visible/add/toggle，再补：

function update(id, text) {
  const row = items.value.find((x) => x.id === id);
  if (row) row.text = text;
}

function hydrate() {
  const raw = localStorage.getItem("vue-todo");
  if (raw) items.value = JSON.parse(raw);
}

watch(items, (v) => localStorage.setItem("vue-todo", JSON.stringify(v)), {
  deep: true,
});

应用启动时 hydrate()。

步骤 3：列表页

<script setup>
import { storeToRefs } from "pinia";
import { useTodoStore } from "@/stores/todo";
import { RouterLink } from "vue-router";

const store = useTodoStore();
const { visible, filter } = storeToRefs(store);
</script>

<template>
  <input
    @keyup.enter="
      store.add($event.target.value);
      $event.target.value = '';
    "
  />
  <button
    v-for="f in ['all', 'active', 'done']"
    :key="f"
    type="button"
    @click="filter = f"
  >
    {{ f }}
  </button>
  <ul>
    <li v-for="t in visible" :key="t.id">
      <input type="checkbox" :checked="t.done" @change="store.toggle(t.id)" />
      <RouterLink :to="`/todo/${t.id}`">{{ t.text }}</RouterLink>
    </li>
  </ul>
</template>

步骤 4：详情页

用 useRoute().params.id 找到 item；找不到显示「不存在」并链回首页。
编辑标题调用 store.update。

步骤 5：可选远程种子数据

onMounted(async () => {
  if (store.items.length) return;
  // fetch mock / Boot API，写入 store；处理三态
});

无后端时用本地 mock JSON 也行，但在笔记标明「mock 边界」。

步骤 6：构建与对比文

npm run build && npm run preview

写短文：模板 vs JSX、ref vs useState、Pinia vs Context、Vue Router vs Next 路由。
交卷标准：自己能讲清，不是粘贴官方广告语。

讲清楚要点

先跑通闭环再加花样：鉴权、拖拽可后加。
id 类型：路由参数是字符串，=== 时注意转换。
持久化与远程冲突：要想好「谁覆盖谁」。
组件拆分：列表项、筛选条可拆，避免单文件过千行。
主站技术栈不变：练习仓库独立；platform 仍 React/Next + Spring。
路线图：完成后到 frontend 路线图 Vue 相关节点确认链接。

你可能会懵的地方

详情页刷新丢了？
检查 hydrate 是否在 router 就绪前执行；store 是否单例。
@ 别名失败？
看 vite/tsconfig 路径；改相对路径也能交卷。
和 React Todo 作业重复？
有意为之——迁移练习最值钱。
要不要 TypeScript？
加分项；interface TodoItem 可对照 TS 课。
Nuxt 要现在上吗？
不必。核心收官即可。

错法对照

错法	问题	正解
只做列表不做路由	未达综合	补详情页
解构 store 丢响应	筛选失灵	storeToRefs
构建失败仍称完成	假完成	修到 build 绿
把练习合并进 platform	栈污染	独立目录
对比文只写「都很好」	无迁移收获	写具体 API 对应
无错误态就接 API	一挂就白屏	三态

自测三问

本综合练习强制串联了哪些能力？
直开 /todo/:id 时数据从哪来？
学完 Vue track 后，本站产品代码应回到哪条技术栈？

小结一句话

Vue track 收官：SFC + 响应式 + Router + Pinia + 取数构建；主栈请回 Next.js + React + Spring Boot。