Vuetify 내비게이션 드로어가 닫히기 시작한 후 두 번째 열림

Vuetify 내비게이션 드로어가 닫히기 시작한 후 두 번째 열림

Vuex를 사용하여 NuxtJs에 Vuetify Navigation Drawer를 설정하여 드로어 상태를 처리하였습니다.데스크탑에 페이지를 로드하면, 드로어가 닫히고 나서, 1초 후에 열리는 문제 이외에는, 모든 것이 정상적으로 동작합니다.다음은 하드 리프레시(hard refresh)를 실행하는 동영상입니다.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를 사용하여 페이지를 실행하면 정상적으로 작동합니다.문제가 있는 것은 데스크탑뿐입니다.

고마워요.

저도 같은 문제를 안고 여러 가지 방법을 시도했습니다.지금까지 찾은 유일한 방법은 네비게이션 드로어 소품을 사용하는 것입니다.disable-resize-watcher기본값은 false이므로 어떤 이유로 페이지를 새로고침하면 내비게이션 드로어가 열립니다.이 프로포트의 값을 true로 설정하면 문제가 해결됩니다.

이 문제를 해결하기 위해 검토해야 할 몇 가지 사항:

• 사용하고 있습니까?v-app응용 프로그램의 루트로 사용됩니다.이 문서에 따르면 의무적으로 해야 합니다.
• 정말 필요한가?app을 지지하다v-navigation-bar그리고.v-app-bar사용방법에 대해서는 매뉴얼에 기재되어 있습니다.

  응용 프로그램 레이아웃의 일부로 구성 요소를 지정합니다.콘텐츠 크기를 동적으로 조정하는 데 사용됩니다.이 받침대를 사용하는 구성 요소가 제대로 작동하려면 v-content 구성 요소 외부에 있어야 합니다.

언급URL : https://stackoverflow.com/questions/59091154/vuetify-navigation-drawer-starts-closed-and-then-opens-a-second-later