该用Props/Events时不用状态管理：父子组件间数据流向明确、生命周期绑定紧密、不跨页面复用时，应优先使用Props传值和Events通信；临时UI状态、表单交互等局部数据不应提升至Pinia/Vuex。

状态管理不是万能的，组件通信也不是越简单越好。关键在于：该用通信的地方别硬塞状态，该用状态的地方别靠层层传参。

什么时候该用 Props/Events 而不是状态管理

父子之间、数据流向明确、生命周期绑定紧密时，Props/Events 就是首选。比如表单子组件接收初始值、提交后把结果抛回父组件统一处理——这类数据只在局部流动，不跨页面、不被其他模块复用，放进 Pinia 或 Vuex 反而增加冗余。

• 父组件控制子组件显隐或加载状态，用 props 控制 v-if / v-show
• 子组件触发操作（如点击“保存”），用 emit 抛出事件+载荷，由父组件决定后续动作（刷新列表、跳转、弹提示）
• 避免把临时 UI 状态（如按钮 loading、输入框 focus 状态）提升到全局 store

Provide/Inject 适合哪些“中间层”场景

当祖孙组件需要共享配置或上下文，但又不想让中间层组件感知或转发时，Provide/Inject 是轻量解耦方案。它不等于状态管理，而是“注入依赖”，类型安全弱但穿透力强。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 主题切换器向下透传 theme 和 toggleTheme 方法
• 表格组件向内部 Cell、SortIcon 等子组件提供 pagination 实例或排序回调
• 注意：不要用 inject 去取用户权限等业务状态——这类数据应走 Pinia 统一管理并响应式更新

Pinia/Vuex 的真正职责边界

Pinia 不是用来“存所有数据”的仓库，而是管理跨组件、跨路由、需持久化或需响应式同步的状态。典型标志是：多个不相关组件都要读写它，或它的变更要影响整个视图树。

立即学习“前端免费学习笔记（深入）”；

• 用户登录态、token、基本信息 → 存 userStore
• 菜单权限、功能开关（如 canExport）→ 存 appStore 或 permissionStore
• 搜索条件、分页参数若仅在一个页面内流转，优先用组件自身 ref 或 provide；若需“回到页面时恢复上次搜索”，才考虑存入 store 并配合路由守卫同步

事件总线（mitt）和自定义事件的分工

自定义事件（$emit）是组件接口的一部分，属于设计契约；事件总线是松耦合通知机制，用于打破组件树约束。

• 同一页面内兄弟组件联动（如筛选区变化 → 列表区刷新）→ 用 mitt 发布 'filter-change'
• 不同路由下组件通信（如从详情页触发编辑页打开弹窗）→ mitt + onUnmounted 清理监听
• 禁止用事件总线代替 props 传基础配置（如 title、size）——这会让组件失去可预测性和可测试性