用 reactive 结合 localstorage 实现配置自动持久化，需在 onmounted 或初始化函数中一次读取并 try/catch 解析，默认兜底；通过 watch 精准监听字段，json.stringify 后写入；封装 createpersistentconfig 工具复用逻辑，避免 ref 套 reactive、共享实例、存不可序列化类型等坑。
用 reactive 结合 localStorage 实现配置自动持久化，核心是让响应式对象的变更实时写入、初始化时准确读取，同时不破坏响应性。关键不在“能不能”，而在于“什么时候读、什么时候写、怎么写安全”。
初始化：只读一次，且容错处理
组件或 store 创建时，从 localStorage 读取原始字符串，JSON.parse 后赋值给 reactive 对象。必须加异常捕获，防止用户手动篡改或存储损坏导致白屏：
- 不要在
setup顶层直接读取并赋值（可能被多次执行） - 推荐在
onMounted或独立的初始化函数中执行一次 - 对
JSON.parse做try/catch，解析失败时使用默认配置兜底
写入：状态变，localStorage 必须立刻同步
reactive 本身不监听变化并自动落盘，需主动建立同步机制。最稳妥的方式是用 watch（不是 watchEffect）监听整个对象或关键字段：
Auth0 React
下载
已弃用 — 请改用 `auth0` 技能（运行 `npx clawhub install auth0`）。适用于为 React 单页应用（SPA）添加 Auth0 登录、登出、受保护路由或用户会话功能。该技能集成 `@auth0/auth0-react` — 即使用户仅表述为“为我的 React 应用添加登录功能”或“保护我的 React 路由”，而未明确提及 Auth0，也应使用此技能。
- 监听整个 reactive 对象时，开启
deep: true，但注意性能开销 - 更推荐监听具体字段（如
watch(() => config.theme, ...)），精准触发 - 写入前必须
JSON.stringify，因为localStorage只接受字符串 - 避免在 watch 回调里直接修改原对象，否则可能引发循环触发
封装成可复用的 reactiveStorage 工具
把读、写、容错逻辑抽离，避免每个配置都重复写 watch + try/catch。例如：
- 定义一个工厂函数
createPersistentConfig(defaults, key) - 内部创建
reactive对象，并自动完成初始化读取 - 内部用
watch深度监听，自动JSON.stringify写入localStorage - 暴露
reset()方法，一键恢复默认并清除本地存储
注意事项：别踩这些坑
很多“存了但刷新没生效”问题都源于细节疏忽：
-
不要用
ref包一层reactive对象——这会多一层不必要的响应层，还容易误操作 -
避免跨组件直接共享同一个
reactive对象实例，除非你明确控制它的生命周期；否则多个组件同时修改可能引发竞态 - localStorage 容量有限（通常 5MB），别存大文件、日志或未压缩的原始数据
- 如果配置项含
Date、RegExp等特殊类型，JSON.stringify会丢失信息，需提前转为可序列化格式（如时间戳、字符串）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
