1，引出需求
当菜单栏的折叠按钮发生变化时，地图的大小跟着变化。折叠按钮在布局组件中，地图组件在布局组件的子组件中，其关系是如下图示。
需求是在地图组件里监听折叠按钮变化时的值。当其折叠时，地图变大，当其展开时，地图缩小。
2，旧的解决方案
我们知道Vue提供了父子通信的功能。父传子通过Props方式，因此我就做了两层的父传子，最终实现了在地图组件中监听到布局组件的折叠按钮的变化。
布局组件绑定折叠属性
<router-view :child-collapsed="collapsed"/>
子组件声明及绑定
props: { childCollapsed: Boolean, },
<DisplayMap :sub-child-collapsed="childCollapsed"></DisplayMap>
地图组件引用并监听
subChildCollapsed:{ type: Boolean, required: true }
我么看到这是组件层次为两层时候的代码冗余度，如果在具有更深组件深度的大型项目中，其复杂度的可想而知。
3，新的解决方案
Vuex为解决该问题带来了光，并指定了规范。让开发者更加容易管理全局变量。
1.声明全局状态
import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ state:{ collapsed: false, }, mutations:{ /*更改菜单是否折叠*/ changeCollapsed(){ this.state.collapsed = !this.state.collapsed;`在这里插入代码片` }, }, }); export default store
2.引用全局状态
在用到全局状态的地方调用$store.state.collapsed即可，而且更改该值后视图会自动刷新。
3.监听全局状态变量
3.1 在计算属性中返回该值：
computed:{ collapsed(){ return this.$store.state.collapsed; } },
3.2 在监听属性里监听：
watch:{ collapsed: function (val){ console.log(val); } }
