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
    },
  },
}