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

Nuxt和Vuetify。导航抽屉母鹿

1 个答案: