vuex---兄弟组件间传值

需求描述:

如下图:TopHeader组件需要获取leftNav中点击的菜单的菜单名称,当leftNav中点击菜单时,把相应的菜单名称显示在topHeader中

vuex---兄弟组件间传值

解决方法:

借助vuex,解决方法如下步骤:

1、安装vuex,命令为【npm install vuex --save】

2、创建store:在项目【src】目录下新建文件夹【store】及【store】下新建文件【index.js】。初始化state对象。【currentMenu】变量用于存储当前显示菜单页的名称。

vuex---兄弟组件间传值

3、在【main.js】中注册store 

vuex---兄弟组件间传值

4、leftNav组件中定义菜单点击方法,并在该方法中将菜单名参数传递给store.js中state对象中的【currentMenu】变量

vuex---兄弟组件间传值

5、在topHeader组件中引入【currentMenu】

vuex---兄弟组件间传值