视频演示如何在约 10 分钟内，把 Firebase 邮箱/密码登录接入一个 Vue 3（Vite） 项目：从创建 Firebase 项目与启用认证方式，到在前端初始化 SDK、实现注册/登录/登出、并用路由守卫保护页面。LearnVue

主要内容梗概

• 项目目标：在全新的 Vue 3 应用里完成最小可用的用户认证流程（注册、登录、登出、受保护页面）。LearnVue
• 创建前端项目：使用 Vite 初始化 Vue 3 项目，安装并引入 firebase SDK。LearnVue
• 配置 Firebase：在 Firebase 控制台新建项目，启用 Email/Password 认证提供方，获取并粘贴 apiKey 等配置到前端。LearnVueLogRocket Blog
• 初始化与封装：在单独的模块中 initializeApp，导出 getAuth()，并封装常用方法（如 createUserWithEmailAndPassword、signInWithEmailAndPassword、signOut）。LearnVue

一句话总结

视频演示了如何在 Vue 3 中把组件/全局状态与 localStorage 做到“读一次、自动双向同步、跨标签页一致”，核心思路是：以 Vue 状态为唯一数据源，启动时从 localStorage 水合（hydrate），之后用 watch 持久化，并监听 storage 事件做跨页同步。这一做法与官方“客户端存储”与“状态管理”文档是一致的。 vuejs.org+1

关键要点

• localStorage 本身不具备响应性；应当让 state 成为真源，再把变化写回存储。 Stack Overflow
• 启动时：从 localStorage 读取，安全反序列化并写入 state（读不到就用默认值）。
• 运行时：watch(state, { deep: true }) → localStorage.setItem()；可加防抖避免高频写入。
• 跨标签页：监听 window.onstorage，当同键值在其它标签页变更时，回填到当前 state。 GeeksforGeeks
• 全局状态建议用 Pinia 插件或轻量自写插件实现“全仓库持久化 + 复原（rehydrate）”