Vue 3 组合式 API 中组件状态持久化有三种方式：一是用 ref/reactive + watchEffect 手动同步 localStorage，适合单组件少量状态；二是封装 usePersistentState 组合式函数，支持类型推导与复杂数据；三是对接 Pinia 配合 pinia-plugin-persistedstate 实现跨组件持久化，兼容 SSR 与多标签页。
Vue 3 组合式 API 中组件状态的持久化，核心在于把响应式数据与浏览器存储（如 localStorage、sessionStorage）做可靠同步，同时避免破坏响应性、不触发不必要的更新，也不干扰 SSR 或多标签页场景。
直接用 ref/reactive + watchEffect 同步到 localStorage
这是最轻量、可控性最强的方式，适合单个组件内少量关键状态（如表单草稿、主题偏好、折叠展开状态）。
- 用 ref 或 reactive 定义状态，保持响应式
- 用 watchEffect 监听变化，自动写入 localStorage
- 组件初始化时从 localStorage 读取并赋值，确保刷新后还原
示例：
const theme = ref(localStorage.getItem('theme') || 'light')watchEffect(() => { localStorage.setItem('theme', theme.value) })
onMounted(() => { theme.value = localStorage.getItem('theme') || 'light' })
封装成可复用的组合式函数 usePersistentState
避免每个组件重复写 watch + 读写逻辑，抽成一个通用 hook，支持类型推导和默认值。
立即学习“前端免费学习笔记（深入）”；
Wjs Uploading Video
下载
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
- 接收 key（存储键名）、初始值、可选的 storage 类型（localStorage/sessionStorage）
- 内部处理 JSON 序列化/反序列化，兼容对象、数组等复杂类型
- 返回 ref，使用方直接解构赋值，语义清晰
调用方式：
const [sidebarOpen, setSidebarOpen] = usePersistentState('sidebar-open', true)const [filters, setFilters] = usePersistentState('search-filters', { keyword: '', category: '' })
对接 Pinia 实现跨组件状态持久化
当状态需要被多个组件共享（如用户登录态、全局设置），推荐交由 Pinia 管理，并开启持久化插件。
- 安装 pinia-plugin-persistedstate（注意名称拼写，非 -persist）
- 在 main.js 中注册插件：
pinia.use(createPersistedState()) - 在 defineStore 的 options 中声明
persist: true，或精细化配置字段、storage、key
优势：自动处理 hydration、SSR 兼容、跨标签页同步（需配合 broadcastChannel）、支持加密和版本迁移等进阶能力。
注意 sessionStorage 的适用边界
sessionStorage 不适合“记住用户”这类长期状态，但非常适合临时会话级数据：
- 表单中途离开又返回（未提交前的状态保留）
- 向导流程的中间步骤（如多步注册）
- 仅当前标签页生效的 UI 控制（如弹窗开关、临时筛选条件）
注意：它不会自动响应其他标签页的变更，也不参与服务端渲染，使用时无需额外判断环境。
