VueJS + Vuex + Vuetify Navigation Drawer

Question

I have a page with a toolbar and a sidebar. The sidebar is only visible when a user is logged in. The sidebar Navigation Drawer is default not visible if the user is on a mobile device.

Now i want a button in the toolbar that the user can open the sidebar. But the toolbar and the sidebar are two different components. Therefore i'm using Vuex to manage the state. But the state is computet and has no setter, so i can't use the state direct in the navigaion controllers v-model.

Now i read that you can define a get and a set method on computed variables. But is this the best way to do this?

Answer 1

in your template:

<template>
 <v-navigation-drawer
      :value="isHomeNavigationDrawerOpen"
      @input="TOGGLE_HOME_NAVIGATION_DRAWER"
      ...>
 </v-navigation-drawer>
</template>

<scripts>
import { mapState, mapActions } from 'vuex'
export default {

  computed: {
    ...mapState('userData', ['user', 'loggedIn']),
    ...mapState('toolbar', ['isHomeNavigationDrawerOpen']),
  },
  methods:{
    ...mapActions('toolbar', ['TOGGLE_HOME_NAVIGATION_DRAWER']),
  }
...

In your store module toolbar.js (or your module name)

export default {
  state: {
    isHomeNavigationDrawerOpen: null,
  },
  actions: {
    TOGGLE_HOME_NAVIGATION_DRAWER(context, open) {
      context.commit('TOGGLE_HOME_NAVIGATION_DRAWER', open)
    },
  },
  mutations: {
    TOGGLE_HOME_NAVIGATION_DRAWER: (state, open) => {
      state.isHomeNavigationDrawerOpen = open
    },
  },
}

Answer 2

The way vuex want you to do is to use the proper state mutation.

@click="$store.commit('open-sidebar')"

And the computed value will react to the mutation.

Answer 3

On your toolbar component, this is where you want your button; Define a drawer boolean property. The html with the button in the toolbar component would look something like this:

<v-toolbar color="primary" dark app :clipped-left="$vuetify.breakpoint.mdAndUp" fixed>
        <v-toolbar-side-icon @click.stop="$emit('update:drawer', !drawer)"></v-toolbar-side-icon>

In the toolbar component parent you would also want to declare an drawer variable. Then the html would look something like this:

<toolbar :drawer.sync="drawer"></toolbar>
            <v-navigation-drawer class="secondary" dark fixed :clipped="$vuetify.breakpoint.mdAndUp" app v-model="drawer">

toolbar is your toolbar component which I mentioned earlier.

You will note that the navigation drawer is now listening to the drawer property.

Please let me know if this answer is not suffice, I will create an example for you