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 代码，也可以没有临时道具。