我已经使用Vuex在NuxtJS上设置了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模拟器运行页面时,效果很好。只有台式机出现问题。
谢谢。
答案 0 :(得分:2)
我遇到了同样的问题并尝试了很多方法来解决它。
到目前为止,我发现的唯一方法是使用名为 disable-resize-watcher
的导航抽屉道具。
它的默认值为 false,因此当您由于某种原因重新加载页面时,导航抽屉会打开。将此道具的值设置为 true 将解决问题。
答案 1 :(得分:0)
您应该解决的一些问题:
v-app
作为应用程序的根目录。根据{{3}}文档,必须这样做。 app
和v-navigation-bar
上确实需要v-app-bar
道具吗?该文档描述了它的用法:
将组件指定为应用程序布局的一部分。用于动态调整内容大小。使用此道具的组件应位于v-content组件之外才能正常运行。