Imagine this scenario: I have two files - App.vue and Home.vue. In App.vue, there is a navigation drawer component, and in Home.vue, there is a toolbar component. The issue arises when I try to toggle the state of the navigation drawer (true or false) from the toolbar component in Home.vue (where the navigation drawer is rendered). Surprisingly, the code snippet below does not produce any errors but fails to change the visibility of the navigation drawer. Strangely enough, manually setting the state in store.js does reflect the changes in the navigation drawer. Can someone enlighten me with a solution?
store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
drawer: false
},
mutations: {
toggleDrawer: function(state) {
return state.drawer = !state.drawer;
}
},
actions: {
toggleDrawer({ commit }) {
commit('toggleDrawer');
}
},
getters: {
active: (state) => {
return state.drawer;
}
}
})
App.vue
<v-navigation-drawer v-model="drawer"> ... </v-navigation-drawer>
<script>
import store from './store'
export default {
data: function() {
return {
drawer: this.$store.state.drawer
}
}
}
</script>
Home.vue
<v-toolbar-side-icon @click="$store.commit('toggleDrawer')"> ... </v-toolbar-side-icon>
<script>
import store from '../store'
export default {
data: function() {
return {
drawer: this.$store.state.drawer // Maybe unnecessary here
}
}
}
</script>