vue-element-admin折叠侧边栏

### 实现侧边栏折叠功能

在 `vue-element-admin` 项目中，实现侧边栏折叠的功能主要涉及修改状态管理以及相应组件的样式变化。为了达到这一目的，通常会在 Vuex store 中创建一个布尔类型的 state 变量来控制侧边栏的状态。

对于侧边栏的显示逻辑，可以在布局文件（通常是 `Layout.vue` 文件）中引入并监听此变量的变化：

<template>
  <div :class="{'hide-side-bar': isSideBarFolded}">
    <!-- Side bar component -->
    <sidebar v-if="!isSideBarFolded"></sidebar>

    <!-- Main content area -->
    <main-content></main-content>
  </div>
</template>

<script lang="ts">
import { computed } from "vue";
import { useStore } from "@/store";

export default {
  setup() {
    const store = useStore();
    
    let isSideBarFolded = computed(() => store.getters.sidebarOpened);

    function toggleSidebar() {
      store.dispatch('toggleSideBar');
    }

    return {
      isSideBarFolded,
      toggleSidebar
    };
  }
};
</script>

<style scoped>
.hide-side-bar .side-bar {
  display: none;
}
/* Other styles */
</style>

上述代码展示了如何利用计算属性绑定侧边栏可见性的 CSS 类，并提供了一个方法用于触发 Vuex action 改变侧边栏的状态[^3]。

此外，在 Vuex Store 配置里需定义相应的 getter 和 mutation/action 对应的操作:

const mutations = {
  TOGGLE_SIDEBAR(state) {
    state.sideBarOpen = !state.sideBarOpen;
  },
};

const actions = {
  toggleSideBar({ commit }) {
    commit('TOGGLE_SIDEBAR');
  },
};

const getters = {
  sidebarOpened: (state) => state.sideBarOpen,
};

最后，为了让用户能够交互地操作侧边栏开关按钮，可在导航栏或其他合适位置放置一个按钮调用 `toggleSidebar()` 函数完成实际的动作。