如何点击汉堡按钮后将Vue2的导航抽屉收缩为迷你版本？

问题根源：当前汉堡按钮触发的是切换抽屉的显示/隐藏状态（toggleDrawer），而非控制抽屉的迷你模式（mini-variant），导致点击后抽屉直接消失。我们需要调整逻辑，让汉堡按钮控制抽屉的迷你/展开状态，而非显示/隐藏。

1. 更新Vuex状态管理（custom.js） #

添加miniDrawer状态来管理迷你模式，同时保留toggleDrawer用于抽屉的显示/隐藏（若不需要可移除）：

const state = {
    toggleDrawer: true, // 抽屉默认显示
    miniDrawer: true    // 默认开启迷你模式
};

const mutations = {
    // 切换抽屉显示/隐藏（可选保留）
    toggleDrawer: (state) => state.toggleDrawer = !state.toggleDrawer,
    // 设置迷你模式状态
    setMiniDrawer: (state, value) => state.miniDrawer = value,
    // 切换迷你模式（可选，用于双向切换）
    toggleMiniDrawer: (state) => state.miniDrawer = !state.miniDrawer
};

export default {
    namespaced: true,
    state,
    mutations
};

2. 修改导航栏（Navbar.vue） #

将汉堡按钮的点击事件改为触发迷你模式的设置（这里实现点击后强制收缩为迷你模式，若需要双向切换可改用toggleMiniDrawer）：

<template>
  <v-app-bar app>
    <v-app-bar-nav-icon @click="setMiniDrawer(true)"></v-app-bar-nav-icon>
    <v-toolbar-title>Application</v-toolbar-title>
  </v-app-bar>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  methods: {
    ...mapMutations('custom', ['setMiniDrawer'])
  }
}
</script>

3. 修改导航抽屉（NavDrawer.vue） #

将迷你模式的状态绑定到Vuex的miniDrawer，并通过computed实现双向同步（确保点击抽屉元素时能自动更新Vuex状态）：

<template>
    <v-navigation-drawer
      app
      :mini-variant.sync="mini"
      v-model="toggleDrawer"   
    >
    <v-list>
      <v-list-item class="px-2">
        <v-list-item-avatar>
          <v-img src="https://randomuser.me/api/portraits/men/85.jpg"></v-img>
        </v-list-item-avatar>
        <v-list-item-title>John Leider</v-list-item-title>
      </v-list-item>
    </v-list>
    <v-divider></v-divider>
    <v-list nav>
      <v-list-item-group
        v-model="selectedItem"
        color="primary"
      >
        <v-list-item
          v-for="item in items"
          :key="item.text"
        >
          <v-list-item-icon>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-icon>
          <v-list-item-content>
              <v-list-item-title>{{ item.text }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list-item-group>
    </v-list>
  </v-navigation-drawer>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  data () {
    return {
      selectedItem: 0,
      items: [
        { text: "1", icon: "mdi-airplane" },
        { text: "2", icon: "mdi-ferry" },
        { text: "3", icon: "mdi-truck" }
      ]
    }
  },
  computed: {
    ...mapState('custom', ['toggleDrawer', 'miniDrawer']),
    // 实现mini-variant与Vuex状态的双向同步
    mini: {
      get() {
        return this.miniDrawer
      },
      set(value) {
        this.setMiniDrawer(value)
      }
    }
  },
  methods: {
    ...mapMutations('custom', ['setMiniDrawer'])
  }
}
</script>

效果说明 #

• 初始状态：抽屉以迷你模式显示（仅图标）
• 点击抽屉内元素：抽屉自动展开（显示文字）
• 点击汉堡按钮：抽屉收缩回迷你模式（仅图标，不会消失）

内容的提问来源于stack exchange，提问作者mustafa00