前端架构的终极考题"关注点分离"这四个字谁都听过，但到了实际项目里，最常见的两个问题：组件之间怎么通信才能不互相依赖？状态怎么划分才能不"一个文件 500 行"？这套经典中后台模板的 Layout 组件 + Store 模块架构，把两个问题一次性回答了。这篇文章拆解它的联动机制。第一条链路：折叠侧边栏——三个组件的协作方式侧边栏折叠是 Layout 里最基础的交互：用户点 Navbar 上的 hamburger 按钮 → 侧边栏收起 → 主内容区变宽。这个动作涉及三个组件，但没有一对是直接通信的。触发方：Navbar 里的 hamburger 按钮!-- Navbar.vue --hamburger:is-active="sidebar.opened"@toggleClick="toggleSideBar"/methods:{toggleSideBar(){this.$store.dispatch('app/toggleSideBar')// 就这么一行。没有 this.$emit，没有 this.$parent}}Navbar 不知道 Sidebar 的存在。它知道的只有：用户点了 hamburger → dispatch 一个 action。至于这个 action 会引起什么连锁反应，Navbar 不关心。状态中枢：app module// store/modules/app.jsconststate={sidebar:{opened:true,withoutAnimation:false}}constmutations={TOGGLE_SIDEBAR(state){state.sidebar.opened=!state.sidebar.opened state.sidebar.withoutAnimation=false