简单实现aside菜单栏折叠 vuex

仅对该 折叠功能 简洁分析过程

main中：

<template>
      <el-container style="height:100%">
        <!-- 侧边栏 -->
        <el-aside width="200px">
          <Aside></Aside>
        </el-aside>
         
        <el-container>
          <el-header>
            <Header></Header>
          </el-header>
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
</template>

aside中：

通过collapse属性的值选择展开和折叠
:collapse=“isCollapse”

<el-menu  @open="handleOpen" @close="handleClose" :collapse="isCollapse">
    <h3>{{isCollapse?'后台':'后台管理系统'}}</h3>
     <!-- 只有一级菜单 -->
    <el-menu-item index="1" >
          <template slot="title">
          <i class="el-icon-location"></i>
          <span>导航一</span>
        </template>
    </el-menu-item> 
     <!-- 有二级菜单 -->
    <el-submenu index="2">
        <!-- 先一级菜单 -->
        <template slot="title">
            <i class="el-icon-menu"></i>
            <span slot="title">导航二</span>
        </template>
        <!-- 再二级菜单 -->
        <el-menu-item-group >
            <el-menu-item index="2-1">二级1</el-menu-item>
            <el-menu-item index="2-2">二级2</el-menu-item>
            <el-menu-item index="2-3">二级3</el-menu-item>
            <el-menu-item index="2-4">二级4</el-menu-item>
        </el-menu-item-group>
    </el-submenu>
</el-menu>
</template>

使用vuex
思路：
在header中点击按钮触发this.$store.commit(‘CollapseMenu’)
store中CollapseMenu函数将isCollapse取反保存，在aside组件取store的值。

aside组件中：

    computed:{
        isCollapse(){
            return this.$store.state.tab.isCollapse
        }
    }

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import tab from "./tab.js"
Vue.use(Vuex)
export default new Vuex.Store({
  modules: {
    tab,
  }
})

store/tab.js

export default{
    state:{
        isCollapse:false
    },
    mutations:{
        CollapseMenu(state){
            state.isCollapse = !state.isCollapse
        }
    }
}

header组件中
设置点击按钮对aside进行折叠

 <el-button  @click="handleMenu" ></el-button>


     methods:{
        handleMenu(){
            this.$store.commit('CollapseMenu')
        }
    }

也可以用组件之间通信方式。