Pinia 无法跨页面共享状态，需通过持久化插件（如 pinia-plugin-persistedstate 或 pinia-plugin-unistorage）将指定字段存入 localStorage 并自动恢复，确保多页表单数据连续。
Pinia 本身不跨页面共享状态，步骤条表单若分布在多个独立 HTML 页面（如 page1.html → page2.html → page3.html），每次跳转都会销毁 JS 上下文，内存中 store 数据必然丢失。要实现“分步填写、跨页保存”，核心不是让 Pinia 实例传递，而是把表单中间态**持久化到页面共有的存储介质中，并在每个页面启动时自动恢复**。
必须用持久化插件统一管理
手动写 localStorage.setItem/getItem 容易出错、难维护，推荐直接使用官方生态成熟的插件：
- 网页项目（H5）：安装 pinia-plugin-persistedstate，它默认对接 localStorage，开箱即用
- UniApp 多端项目：改用 pinia-plugin-unistorage，能自动适配小程序/APP/H5 的不同存储 API
- 所有页面的入口文件（如 main.ts）都要引入并注册同一个 pinia 实例，且该实例已调用
.use(persist)
Store 中精准配置需持久化的字段
不要把整个表单 state 全存——既浪费空间，又可能混入临时 UI 状态（如按钮 loading、校验提示）。只保留真正需要跨页延续的业务数据：
- 在定义 store 时，显式添加
persist配置，例如：
export const useFormStore = defineStore('form', {<br> state: () => ({<br> step1: { name: '', email: '' },<br> step2: { phone: '', address: '' },<br> step3: { company: '', position: '' },<br> currentStep: 0,<br> isSubmitted: false<br> }),<br> persist: {<br> enabled: true,<br> paths: ['step1', 'step2', 'step3', 'currentStep'] // 只存这四个字段<br> }<br>})
-
currentStep必须包含，否则用户刷新后会回到第一页 - 避免存函数、Date、Map 等无法 JSON 序列化的值，否则会被静默丢弃
多页面协同与用户体验细节
跨页面不是“一存了之”，还要考虑实际交互逻辑：
- 每个页面加载后，store 会自动从 localStorage 恢复数据，组件内可直接读取
formStore.step2.phone渲染表单，默认就是上次填的内容 - 用户中途关闭浏览器再打开，只要没清缓存，数据仍在；退出登录时建议主动调用
formStore.$reset()清空表单 - 如果某步有敏感字段（如身份证号），不要存 localStorage，可改用
storage: sessionStorage或服务端草稿箱方案 - 注意：多个标签页同时编辑同一份表单时，localStorage 不会自动广播变更，需加防覆盖提示或乐观更新策略
验证是否生效的快速方法
别只靠刷新看效果，三步确认更可靠：
- 打开浏览器开发者工具 → Application → LocalStorage，搜索 key（默认是 store 名，如
form），确认有对应 JSON 值 - 在页面 setup 中打印
console.log(formStore.$state)，检查初始化后是否已含历史数据 - 修改任意字段，等待约 100ms（插件默认防抖写入），再刷新页面，观察是否一致
