Vuetify 导航抽屉开始关闭，然后一秒钟后打开

Posted 2023-02-22

技术标签:

【中文标题】Vuetify 导航抽屉开始关闭，然后一秒钟后打开【英文标题】：Vuetify Navigation Drawer Starts Closed and Then Opens a Second Later 【发布时间】：2020-03-24 05:54:53 【问题描述】：

我在 NuxtJS 上设置了一个 Vuetify Navigation Drawer，使用 Vuex 来处理抽屉的状态。一切正常，除了一个问题——即，当我在桌面上加载页面时，抽屉开始关闭，然后一瞬间打开。这是一个我努力刷新的视频，看看我指的是什么：https://www.loom.com/share/477eb0933b3840d2bf7a9b55aaa8e934

这是我的代码：

//app-bar.vue
<template>
  <v-app-bar app color="indigo" dark>
    <v-app-bar-nav-icon @click.stop="mainDrawer = !mainDrawer" />
    <v-toolbar-title>Application</v-toolbar-title>
  </v-app-bar>
</template>

<script>
export default 
  computed: 
    mainDrawer: 
      get() 
        return this.$store.getters.getMainDrawer;
      ,
      set(value) 
        this.$store.dispatch("toggleMainDrawer", value);
      
    
  
;
</script>

// nav-drawer.vue
<template>
  <v-navigation-drawer v-model="mainDrawer" app>
    <v-list dense>
      ...LIST_ITEMS
    </v-list>
  </v-navigation-drawer>
</template>

<script>
export default 
  computed: 
    mainDrawer: 
      get() 
        return this.$store.getters.getMainDrawer;
      ,
      set(value) 
        this.$store.dispatch("toggleMainDrawer", value);
      
    
  
;
</script>

// index.js (vuex file)
import Vuex from "vuex";

const createStore = () => 
  return new Vuex.Store(
    state: 
      mainDrawer: null
    ,
    getters: 
      getMainDrawer: state => state.mainDrawer
    ,
    mutations: 
      toggleMainDrawer(state, value) 
        state.mainDrawer = value;
      
    ,
    actions: 
      toggleMainDrawer( commit , value) 
        commit("toggleMainDrawer", value);
      
    
  );
;

export default createStore;

知道为什么会发生这种情况以及我可以做些什么来改变它。我应该注意，当我使用 android Studio Emulator 运行页面时，它工作得很好。我只有台式机有问题。

谢谢。

【问题讨论】：

我刚刚遇到了同样的问题。你有没有机会找到答案？ 【参考方案1】：

我遇到了同样的问题，并尝试了很多方法来解决它。到目前为止，我发现的唯一方法是使用名为 disable-resize-watcher 的导航抽屉道具。它的默认值为 false，因此当您出于某种原因重新加载页面时，导航抽屉会打开。将此道具的值设置为 true 将解决问题。

【讨论】：

谢谢！这让我发疯了；对我来说，这个问题在更新后突然出现..【参考方案2】：

解决此问题需要考虑的几件事：

您是否使用v-app 作为应用程序的根。根据this doc，这是强制性的。你的v-navigation-bar 和v-app-bar 上真的需要app 道具吗？该文档描述了它的用途：