后台管理系统

通用后台管理

侧边栏的展开与收起

主要是通过两个 CommonAside 和CommonHeader 组件进行实现，其中 CommonAside是对侧边栏进行显示，CommonHeader则是有个按钮来控制对侧边栏的展开与收起，所以需要进行组件间的通信，通过 vuex来进行实现

下载vuex 的依赖

npm i vuex

然后在main.js 文件进行引入。

具体实现步骤

1.首先创建一个store文件夹，里面放入 index.js 进行设置，管理state
通过模块modules定义，定义的模块要进行引入
（1）定义的modules第一个模块，tab.js的内容

export default{
    state:{
        //初始状态 ，默认展开
        isCollapse:false  
    },
    mutations:{
        // 用来定义改变state的方法 同步状态
        // 此时的state就是接收的上面的
        CollapseManu(state){
            // 对原先的状态进行取反
            state.isCollapse = !state.isCollapse
        }

    }
}

（2）在store文件夹下的index.js进行引入

export default new Vuex.Store({  //对外进行暴露
  // 通过模块定义，分成两个模块
  modules: {
    // 引入tab模块
    tab
  }
})

2 在页面中拿到定义的state
（1）首先将原先定义在CommonAside.vue组件中的data里面的isCollapse进行注释，然后在计算属性尽心处理，得到全局定义的isCollapse 的状态

 // 在计算属性里面进行拿到数据
    isCollapse() {
      // this.$store 是全局定义过的，然后state 是index.js的，在tab指的是里面的tab模块中的isCollapse
      return this.$store.state.tab.isCollapse;
    },

<!-- 此时写在标签里面的就是计算属性里面用到的函数-->
 <el-menu
    :collapse="isCollapse"
  >

3 改变isCollapse 的状态，也就是当点击按钮的时候，将当前的isCollapse 进行取反，按钮是在CommonHeader文件里面

此时的逻辑是 首先给按钮绑定一个点击事件 @click=“handleMenu”

然后在js进行处理

 methods: {
    handleMenu() {
      // 此时通过 commit 拿到 mutations中的 CollapseManu 方法
      this.$store.commit("CollapseManu");
    },
  },

此时存在一个问题，就是在进行显示和隐藏的时候，导致顶部的文字换行显示，很丑

  <!-- 判断 isCollapse 是否存在 ，存在代表是收起的状态，将名字改为 后台，不存在展开状态，正常显示 -->
    <h3>{{ isCollapse ? "后台" : "通用后台管理系统" }}</h3>