Vuetify 导航抽屉开始关闭，然后再打开

Question

我在 NuxtJS 上使用 Vuex 设置了一个 Vuetify 导航抽屉来处理抽屉的状态。一切工作正常，除了一个问题——即，当我在桌面上加载页面时，抽屉开始关闭，然后一瞬间打开。这是我进行硬刷新以查看我所指内容的视频： 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 模拟器运行该页面时，它工作得很好。我只有桌面有问题。

谢谢。

Answer 1

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

Answer 2

您应该考虑以下几件事来解决此问题：

• 您是否用作v-app应用程序的根目录。根据这份文件，必须这样做。
• 你真的需要你的和app的支持吗？该文档描述了它的用途： v-navigation-barv-app-bar

  将组件指定为应用程序布局的一部分。用于动态调整内容大小。使用此属性的组件应驻留在 v-content 组件之外才能正常运行。