Managing State for Overlay Dismissed Components in Vuetify - vuex

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 layout, and into it's own component, so that it can be reused in multiple layouts.
The activator for this drawer still remains in the default.vue component, so I added a sidebar state to vuex:
export const state = () => ({
baseurl: 'http://example.com/api/',
sidebar: false,
authenticated: false,
token: null,
user: null,
})
The mutator for the sidebar looks like so:
export const mutations = {
toggleSidebar(state) {
state.sidebar = !state.sidebar;
}
}
This works perfectly when opening the drawer, but because the drawer is dismissed via clicking the overlay, or clicking off of sidebar (if you've turned the overlay off) vuex throws a huge error:
How can I make this work correctly through vuex?

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.
<template>
<v-navigation-drawer v-model="drawer" ...>
</template>
<script>
export default {
computed: {
drawer: {
get () {
return this.$store.state.sidebar
},
set (val) {
this.$store.commit('sidebar', val)
}
}
}
}
</script>
// vuex mutation
sidebar (state, val) {
state.sidebar = val
}
https://v2.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
<template>
<v-navigation-drawer :value="$store.state.sidebar" #input="$store.commit('sidebar', $event)" ...>
</template>
https://v2.vuejs.org/v2/guide/components.html#Using-v-model-on-Components

Answer 2

Another solution is to use vuex-map-fields package which enables two-way data binding for states saved in a Vuex store.
It makes the code clear, readable more than the normal way (as in the accepted answer).
Basic example:
in your store file
// Import the `getField` getter and the `updateField`
// mutation function from the `vuex-map-fields` module.
import { getField, updateField } from 'vuex-map-fields';
export const state = () => ({
baseurl: 'http://example.com/api/',
sidebar: false,
authenticated: false,
token: null,
user: null,
})
export const getters = {
// Add the `getField` getter to the
// `getters` of your Vuex store instance.
getField,
}
export const mutations = {
// Add the `updateField` mutation to the
// `mutations` of your Vuex store instance.
updateField,
}
in your component
template>
<v-navigation-drawer v-model="sidebar" ...>
</template>
<script>
import { mapFields } from 'vuex-map-fields';
export default {
computed: {
// The `mapFields` function takes an array of
// field names and generates corresponding
// computed properties with getter and setter
// functions for accessing the Vuex store.
...mapFields([
'baseurl',
'sidebar',
// etc...
]),
}
}
</script>
for more details, you can check its githab page