Vue 2：组件通信、keep-alive、Vuex、权限与 axios

一、组件通信方式

1. 父子：props 下行，$emit 上行。
2. 父拿子实例：ref。
3. 跨层级：provide / inject。
4. 兄弟 / 全局事件：事件总线（new Vue() 作 $bus，Vue 3 推荐 mitt 等库）、或 Vuex。
5. 全局状态：Vuex（Vue 3 时代多为 Pinia，本章仍以文中 Vuex 梳理为主）。

原则：props 单向数据流，子组件不直接改 props，通过事件请求父级变更。

---

二、keep-alive

作用

缓存动态组件 / 路由视图实例，避免反复挂载卸载带来的销毁重建。

属性

• include / exclude：按组件 name 字符串或正则筛选。
• max：缓存个数上限，LRU 语义淘汰。

注意

• 被缓存组件须配置 name（与 include/exclude 匹配）。
• 生命周期：activated / deactivated 代替一般的销毁钩子场景。
• Vue 3 可用 defineOptions({ name: '...' })（3.3+）配合 <script setup>。

---

三、Vuex 核心

五件套

选项	作用
state	全局状态
getters	派生状态（类似 computed）
mutations	同步修改 state 的官方入口
actions	异步封装，内部 commit mutation
modules	子模块拆分

调用

• commit → mutation
• dispatch → action

映射辅助

mapState、mapGetters、mapMutations、mapActions 映射到组件 computed / methods；模块化时第一个参数写命名空间模块名。

注意

• mutations 与 actions 命名冲突会导致 map 后混乱。
• 与组件 data 同名会报错。

---

四、权限管理

模型

• RBAC：角色 → 权限点。
• ACL：资源维度控制。

前端典型链路

登录拿 Token + 权限列表 → 存 Vuex + 持久化 → 路由守卫拦截 → 动态路由（addRoutes / Vue Router 4 的 addRoute）→ 指令 / 组件控制按钮显隐。

两种路由方案

1. 前端维护全量路由表：后端只返回有权限的 key，前端过滤后注册路由；缺点：菜单结构调整需发前端版。
2. 后端下发路由结构：前端解析为路由配置再动态添加；维护成本更低，更推荐。

必须强调

权限最终以服务端校验为准；前端只做体验层隐藏与路由拦截。

---

五、axios

• 基于 Promise 与 XMLHttpRequest 封装的 HTTP 客户端。
• 特点：拦截器、自动 JSON、取消请求（CancelToken / AbortController）、拦截 XSRF 等。
• 原理要点：适配器统一浏览器与 Node；拦截器即 Promise 链；配置合并优先级：单次请求 > 实例默认 > 全局默认。

---

六、小结

• 通信：由近到远依次 props/emit → provide/inject → 全局 store / 事件总线。
• 缓存路由页：keep-alive + activated 钩子。
• 复杂共享状态：Vuex mutation/action 分工。
• 权限：路由 + 按钮两级 + 后端兜底。
• HTTP：axios 拦截器统一 Token、错误码。

下一章：路由·SPA·构建与项目优化。