小编Tre*_*aul的帖子

（我发现了一些类似的问题，但似乎没有一个能解决我的问题，但是如果我错过了什么，请参考。）

我正在使用 Vue、Vuex 和 Vuetify。根据“Google Keep”示例布局，我分解出了 NavDrawer 和 AppBar 组件。然而，我在使 NavDrawer 切换正常工作时遇到了一些麻烦。

在实现 Vuex 之前，我使用了 props 和 events，遍历了父组件。使用Vuex，我的代码如下：

main.js：

const store = new Vuex.Store({
  state: {
    drawerState: null
  },
  mutations: {
    toggleDrawerState(state) {
      state.drawerState = !state.drawerState
    }
  }
})

应用栏.vue：

<template>
  <v-app-bar app clipped-left class="primary">
    <v-app-bar-nav-icon @click="toggleDrawer()"/>
  </v-app-bar>
</template>

<script>
export default {
  name: 'AppBar',
  methods: {
    toggleDrawer: function() {
      this.$store.commit('toggleDrawerState')
    }
  }
}
</script>

导航抽屉.vue：

<template>
  <v-navigation-drawer v-model="drawerState" app clipped color="grey lighten-4">
    <!-- content -->
  </v-navigation-drawer>
</template> …