localStorage 配合 Pinia 的核心目标是实现页面刷新后状态自动同步：状态变更即时写入 localStorage，页面加载时自动恢复；推荐优先使用 useLocalStorage 组合式函数处理单个字段，整 Store 持久化则用 pinia-plugin-persistedstate 插件。
localStorage 配合 Pinia 的核心目标就一个：页面刷新后，状态不丢。不是手动存、手动取，而是让状态一变，本地存储自动更新；页面一打开，状态自动从 localStorage 恢复。关键在于“自动同步”，而不是“自己写一堆 watch 和 getItem”。
用 useLocalStorage 组合式函数（推荐）
这是最轻量、最直观的方式，适合单个状态字段或简单 Store。Pinia 官方生态里有 pinia-plugin-persistedstate，但如果你只想对几个关键字段做持久化（比如播放器类型、主题色、登录态），直接用组合式函数更干净。
- 安装
vueuse（它内置了useLocalStorage）：npm install @vueuse/core - 在 Store 中直接绑定：
const theme = useLocalStorage('app-theme', 'light');
这行代码执行后，theme.value就既是响应式变量，又和 localStorage 同步 - 修改它：
theme.value = 'dark'→ 立刻写入 localStorage；刷新页面 → 自动读取并赋值
用 pinia-plugin-persistedstate 插件（适合整 Store）
当你希望整个 Store（比如用户信息、配置项、购物车）都默认持久化时，插件方式更省心。它会在 Store 初始化时自动从 localStorage 读取，在状态变更时自动写回。
- 安装：
npm install pinia-plugin-persistedstate - 注册插件（main.ts）：
const pinia = createPinia();<br>pinia.use(piniaPluginPersistedState);<br>app.use(pinia);
- 在 Store 中声明哪些字段要持久化：
export const useUserStore = defineStore('user', {<br> state: () => ({ token: '', userInfo: null }),<br> persist: true // 或更细粒度：{ key: 'user-store', paths: ['token'] }<br>});
手动实现双向同步（理解原理必备）
知道插件怎么工作，才能调得准、修得快。本质就两件事：启动时读、变化时写。
- 页面加载后，从 localStorage 取值，用
$patch注入 Store：const saved = localStorage.getItem('user-store');<br>if (saved) store.$patch(JSON.parse(saved)); - 监听 Store 变化，触发写入：
store.$subscribe((mutation, state) => {<br> localStorage.setItem('user-store', JSON.stringify(state));<br>}); - 注意：避免循环写入（比如写入时又触发 $subscribe），建议加防抖或只监听关键字段
登录态这类敏感状态的特别处理
登录状态不能只靠 localStorage，还要配合路由守卫和主动清理逻辑，否则容易出现“已登出但界面还显示头像”的错觉。
- 用
useLocalStorage('isLoggedIn', false)存布尔值，比存 token 更安全（token 应存在内存中，仅用它校验） - 退出时不仅要设
isLoggedIn.value = false，还要清空相关字段（如 user、token）和 localStorage 里的冗余键 - 配合
watch响应登录状态变化，自动跳转：watch(isLoggedIn, (v) => { v ? router.replace('/home') : router.replace('/login'); });
