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 ponents. Therefore i'm using Vuex to manage the state. But the state is putet 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 puted variables. But is this the best way to do this?

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 ponents. Therefore i'm using Vuex to manage the state. But the state is putet 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 puted variables. But is this the best way to do this?

• javascript
• vuejs2
• vuetify.js

• With some sample code that would be better. – mathk Commented Jan 10, 2019 at 11:45

4 Answers 4

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 {

  puted: {
    ...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.mit('TOGGLE_HOME_NAVIGATION_DRAWER', open)
    },
  },
  mutations: {
    TOGGLE_HOME_NAVIGATION_DRAWER: (state, open) => {
      state.isHomeNavigationDrawerOpen = open
    },
  },
}

In Vuetify, the ponent v-navigation-drawer emit a event called 'input' used by v-model.

This event is emitted when the navigation drawer is displayed and when it is closed. If we call the 'toggle' function in both cases we will enter an infinite loop.

I have the same problem and it is what is happening to me.

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

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

And the puted value will react to the mutation.

On your toolbar ponent, this is where you want your button; Define a drawer boolean property. The html with the button in the toolbar ponent 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 ponent 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 ponent 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