vuex结合elementUi实现收缩侧边栏_elementui写后台伸缩菜单栏

1. 首先引入vuex :

  npm i vuex@3.6.2

2. 在src下面创建 store 文件夹 里面创建 index.js 和 tab.js (主要是控制侧边栏的数据)

index.js

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

tab.js

export default {
    state: {
        isCollapse: false //控制菜单展开还是收起
    },
    mutations: {
        //修改菜单展开收起的方法
        collapseMenu(state) {
            state.isCollapse = !state.isCollapse
        }
    }
}

3. 将store挂载在main.js

4. 在头部和侧边vue中编写对应的逻辑(主要是修改isCollapse的状态)