中文教程:https://nuxt.com.cn/docs/4.x/getting-started/introduction
水合(Hydration)
一句话概括:水合 = “让服务端渲染的静态 HTML 在浏览器里‘活过来’、变成可交互的 Vue 应用”
水合是 Nuxt/Vue 在 SSR 应用中把服务端渲染出的静态 HTML“激活”为可交互的动态应用的过程:服务端先执行组件逻辑、加载数据,生成完整的 HTML 和初始状态(序列化到 __NUXT__ 中)发给浏览器;浏览器加载后,Vue 不重新渲染整个页面,而是复用已有的 DOM 结构,只把事件监听、响应式状态、Pinia store 等“绑定”上去。而 pinia-plugin-persistedstate 就是在水合完成后,自动从 localStorage 读取数据,覆盖服务端初始的 null,实现刷新后状态不丢失。
pinia-plugin-persistedstate 支持 localStorage 和 Cookie 两种模式,若是移动端优先的项目,个人推荐用 localStorage 来保存登录信息,刷新页面不会丢失,因为插件会在水合后自动恢复。虽然SSR服务端不支持 localStorage,state.user = null,但客户端会从 localStorage 强行恢复。加了这个插件后,stores 里不再需要手动操作 localStorage。