Nuxt 和 Vuetify。导航抽屉母鹿

Question

一个星期以来，我一直在努力解开这个谜团。

我正在尝试在我的 Nuxt/Vue 网站中使用 Vuetify 设置一个侧边栏，人们点击汉堡菜单并打开侧边栏。为此，我设置了汉堡菜单以运行切换方法。

<v-app-bar-nav-icon @click="toggleSidebar"></v-app-bar-nav-icon>
......
<script>
import { mapMutations } from 'vuex';
export default {
  methods: {
    ...mapMutations({
      toggleSidebar: 'appSidebar/toggleSidebar'
    })
  }
}
</script>

该方法然后更新 vuex 状态

export const state = () => ({
  sidebarOpen: false
})

export const mutations = {
  toggleSidebar(state) {
    state.sidebarOpen = !state.sidebarOpen;
  },
}

这很好用。当我单击汉堡菜单时，该栏会打开和关闭。但是，出于某种原因，我很高兴这样做，当我在侧边栏外部单击时侧边栏关闭（如果有人能解释这是如何工作的，我将不胜感激）。发生这种情况时，状态不会更新，下次我要打开时，我需要单击菜单两次以使其重新关闭然后再次打开。

这就是我设置侧边栏的方式

<v-app>
  <v-navigation-drawer app temporary clipped v-model="status" color="blue lighten-3" dark>

<script>
  export default {
    computed: {
      status (){
        return this.$store.state.appSidebar.sidebarOpen   
      }
    }
  }
</script>

感谢您的帮助！

Answer 1

由于临时道具，当您在外部单击时抽屉会关闭。根据您的代码，您的状态仅在单击汉堡按钮时才会更改。但在内部 vuetify 使用临时属性。您可以不使用 vuex 代码或不使用临时属性。