适合放入 Store 的数据是被多个组件依赖、需跨层级共享且修改逻辑集中管控的状态；如用户登录信息、购物车、主题模式等全局状态，以及需统一触发副作用的业务状态。
适合放入 Store 的数据，是那些被多个组件依赖、需要跨层级共享、且修改逻辑需集中管控的状态。不是所有数据都该进 Store —— 私有状态留在组件内部更清晰、更高效。
多组件共用的全局状态
当两个或以上不直接父子嵌套的组件（比如兄弟组件、隔代组件、路由级组件）都需要读写同一份数据时，就该考虑放进 Store。
- 用户登录信息（token、userProfile）—— 头部导航、个人中心、权限按钮都依赖它
- 购物车商品列表 —— 商品页、侧边栏、结算页、订单确认页同步展示和更新
- 主题模式（dark/light）、语言偏好 —— 全局切换影响布局与文案
需统一触发和响应的业务状态
这类状态的变更往往伴随副作用（如 API 请求、本地存储、权限校验），不适合分散在各组件中手动维护。
- 加载态（loading）：多个接口并行时，需聚合控制全局 loading 提示
- 表单草稿（formDraft）：离开页面前保存、返回后恢复，需脱离单个组件生命周期
- 筛选条件（filters）：列表页 + 搜索框 + 高级筛选弹窗共同维护同一组参数
避免放入 Store 的典型情况
这些数据若进了 Store，反而增加冗余、降低可维护性：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
- 组件内临时 UI 状态：如折叠面板开关、模态框显隐、输入框聚焦态
- 仅用于计算的派生值：如
fullName = firstName + lastName，用 computed 或 getter 更合适 - 一次性传递的数据：如路由 query 参数、事件回调 payload，用 props / emit / router 更直接
判断小技巧：问自己三个问题
在决定是否放入 Store 前，快速确认：
- 这个数据是否会被3 个及以上组件访问？
- 它的变化是否必须保证所有消费者同时感知（而非各自维护副本）？
- 修改它是否涉及异步操作或跨系统协同（如请求+缓存+通知）？
满足其中两条，就值得放进 Store；只满足一条，优先用 provide/inject 或 shared reactive 对象；都不满足，就留在组件里。
