2

(I spied some similar questions, but none seemed to address my problem, however please refer if I missed something.)

I'm using Vue, Vuex, and Vuetify. Working from the "Google Keep" example layout, I factored out the NavDrawer and AppBar components. I'm having some trouble getting the NavDrawer toggle to work, however.

Before implementing Vuex, I used props and events, going through the parent component. With Vuex, my code is as follows:

main.js:

const store = new Vuex.Store({
  state: {
    drawerState: null
  },
  mutations: {
    toggleDrawerState(state) {
      state.drawerState = !state.drawerState
    }
  }
})

AppBar.vue:

<template>
  <v-app-bar app clipped-left class="primary">
    <v-app-bar-nav-icon @click="toggleDrawer()"/>
  </v-app-bar>
</template>

<script>
export default {
  name: 'AppBar',
  methods: {
    toggleDrawer: function() {
      this.$store.commit('toggleDrawerState')
    }
  }
}
</script>

NavigationDrawer.vue:

<template>
  <v-navigation-drawer v-model="drawerState" app clipped color="grey lighten-4">
    <!-- content -->
  </v-navigation-drawer>
</template>

<script>
export default {
  name: 'NavigationDrawer',
  computed: {
    drawerState: {
      get: function() { return this.$store.state.drawerState },
      set: () => null
    }
  }
}
</script>

The set: () => null in the NavDrawer's computed properties is because I at first set it to call the mutation, which resulted in a feedback loop of toggling.

Now, my problem is that, given an initial v-model value of null, Vuetify has the Drawer open on desktop and closed on mobile. And when the drawerState = !drawerState is called, the null is made true, but that just keeps the drawer open on desktop, meaning that the button has to be clicked again to close the drawer. After that initial double-trigger problem, it works fine on desktop. On mobile, however, it always needs two triggers. (I say mobile, but really I just resized my browser window down.) I assume this is because when resizing (or on load), the drawer automatically hides, but has no way to update the Vuex store boolean, meaning that a double trigger is necessary.

My question is thus: what is the standard or best-practice way to implement Vuetify's navdrawer, so as to toggle it from another component? I thought that the state (whether open or closed) might be directly stored, but there are no "opened" or "closed" events to access it by. (E.g. this question has no answers.) It works fine on the example page, but how can that be adapted to work as child components?

Thanks!

TresPaul
  • 25
  • 5

1 Answers1

6

It's a good option to use Vuex getters and refer to them in your computed getter, as well as retrieving the new value in the computed setter and using that to commit the mutation in the store. So your store would become:

const store = new Vuex.Store({
  state: {
    drawerState: false
  },
  mutations: {
    toggleDrawerState (state, data) {
      state.drawerState = data
    }
  },
  getters : {
    drawerState: (state) => state.drawerState
  }
})

And your navigation drawer component would become:

<template>
  <v-navigation-drawer v-model="drawerState" app clipped color="grey lighten-4">
    <!-- content -->
  </v-navigation-drawer>
</template>

<script>
export default {
  name: 'NavigationDrawer',
  computed: {
    drawerState: {
      get () { return this.$store.getters.drawerState },
      set (v) { return this.$store.commit('toggleDrawerState', v) }
    }
  }
}
</script>

Here is a codepen to show a full example: https://codepen.io/JamieCurnow/pen/wvaZeRe

Jamie Curnow
  • 754
  • 1
  • 6
  • 9