Managing State for Overlay Dismissed Components in Vuetify

Question

I\'m building out a vuetify/nuxt frontend for the first time, and I\'ve moved my v-navigation-drawer component out of the default.vue

Answer 1

Instead of binding the drawer's model directly to $store.state.sidebar, use a computed setter in the drawer component. Note that you must pass in the new value from the drawer itself, don't just toggle whatever's already in the store.

// vuex mutation
sidebar (state, val) {
  state.sidebar = val
}

https://vuejs.org/v2/guide/computed.html#Computed-Setter
https://vuex.vuejs.org/en/forms.html

Another option is to bind the prop and event separately

https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components