Layout 组件 + Store 模块的双层架构：关注点分离如何在中后台落地

前端架构的终极考题

"关注点分离"这四个字谁都听过，但到了实际项目里，最常见的两个问题：

1. 组件之间怎么通信才能不互相依赖？
2. 状态怎么划分才能不"一个文件 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