Vuex——控制侧边栏是否折叠使用vuex，本次简单使用到了state，mutations

//项目中在store/vuex.js
// 使用vuex管理isCollapse
export default {
  state: {
    isCollapse: false,//默认不折叠
  },
  mutations: {
    collapseMenu(state) {
      state.isCollapse = !state.isCollapse;
    },
  },
};
//components/CommonSide.vue
 <el-menu  :collapse="isCollapse" style="height: 100%" ></el-menu>

  computed: {//计算属性中，当需要使用多个变量的计算结果时，可以利用vue的计算属性，将计算结果返回给一个计算属性，后面直接调用该属性，利用计算属性结合v-module可以实现简单的计算器功能
    isCollapse() {
      return this.$store.state.tab.isCollapse;
    },
  },
 //components/Header.vue
     <el-button
      type="primary"
      icon="el-icon-edit"
      @click="handleMenu"
    ></el-button>
    <span>首页</span>

  methods: {
    handleMenu() {
      this.$store.commit("collapseMenu");
    },
  },

使用到vuex中state，mutations
vuex：是一个专门为vue.js应用程序开发的状态管理模式。
这个状态我们可以理解为在data中的属性，需要共享给其他组件使用的部分。
也就是说，是我们需要共享的data，使用vuex进行统一集中式的管理。
vuex中，有默认的五种基本的对象：

state：存储状态（变量）
getters：对数据获取之前的再次编译，可以理解为state的计算属性。我们在组件中使用 $sotre.getters.fun()mutations：修改状态，并且是同步的。在组件中使用$store.commit(‘’,params)。这个和我们组件中的自定义事件类似。
actions：异步操作。在组件中使用是$store.dispath(‘’)
modules：store的子模块，为了开发大型项目，方便状态管理而使用的。