可用composition api封装轻量全局状态:通过reactive定义顶层响应式状态,provide/inject跨组件共享;或抽离为usecounter等组合式函数实现复用;proxy可加日志拦截,localstorage支持简单持久化。

不需要引入 Vuex,用 Composition API 自己封装一个轻量、可复用的全局状态模块,完全可行。核心思路是:把响应式状态定义在模块顶层作用域,再通过函数暴露读写接口,让多个组件共享同一份 reactive 实例。
用 reactive + provide/inject 实现跨组件共享
这是最贴近 Vue 3 原生风格的做法,适合中等复杂度、有明确父子层级的场景。
- 在父组件(如 App.vue 或 Layout)中创建 reactive 状态,并用 provide 注入
- 子组件用 inject 获取状态对象,直接读写属性(无需 mutations)
- 为避免意外修改,可用 readonly 包裹后提供只读视图,同时单独暴露更新函数
封装成独立的组合式函数(推荐)
把状态逻辑抽离到单独的 .ts 文件,形成可复用的“状态 Hook”,例如 useCounter、useUser:
- 内部用 reactive 定义状态对象,用 computed 或 ref 暴露派生值
- 导出修改方法(如 increment、login),方法内直接操作 reactive 对象
- 组件中多次调用该函数,返回的是同一份响应式数据(需确保单例,可用闭包或顶层变量控制)
加一层 Proxy 实现简易“mutation 日志”
如果需要追踪谁改了什么,不一定要照搬 Vuex 的 mutation 模式,可以更轻量:
- 用 Proxy 包裹 reactive 对象,在 set 拦截器里打印日志、触发回调或保存快照
- 开发阶段记录修改来源(组件名、时间、字段路径、旧值/新值)
- 生产环境可关闭拦截,保持零开销
配合 localStorage 做简单持久化
很多小项目只需要记住用户偏好、折叠状态等,不必上完整 store:
- 在状态变更后,自动调用 localStorage.setItem 同步关键字段
- 初始化时从 localStorage 读取并合并进 reactive 状态
- 用 watch 监听特定字段变化,避免全量同步
大量免费API接口:立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游,为数据API应用能力赋能!











