1.先写页面，添加样式，添加点击事件，绑定动态类名

  1. <template>
  2.   <div class="hamburger-container" @click="handleClick">
  3.     <svg-icon :icon="icon" />
  4.   </div>
  5. </template>
  7. <script setup>
  8. import { computed } from 'vue'
  9. import { useStore } from 'vuex'
  10. const store = useStore()
  11. const icon = computed(() => {
  12.   return store.getters.sideBarOpened ? 'hamburger-opened' : 'hamburger-closed'
  13. })
  14. function handleClick() {
  15.   store.commit('app/setSideBarOpened')
  16. }
  17. </script>

2.创建一个store模块，管理侧边栏伸缩状态

  1. export default {
  2.   namespaced: true, // 表示这是一个单独的模块,
  3.   state: () => ({
  4.     sideBarOpened: true
  5.   }),
  6.   mutations: {
  7.     setSideBarOpened(state, val) {
  8.       state.sideBarOpened = !state.sideBarOpened
  9.     }
  10.   }
  11. }

3.添加点击事件，改变伸缩状态

4.给app-container绑定动态类名，给sidebar和navbar添加动态样式

  1.   <div
  2.     class="app-wrapper"
  3.     :class="[$store.getters.sideBarOpened ? 'openSideBar' : 'hideSidebar']"
  4.   >