As the state is updated in a computed property component does not update

Question

I do not understand what i am doing wrong. I'm using Vuetify framework with nuxt.js on top of vue.js.

I wish that the navigation drawer's initial state to be open on the index page but close on the others. I can manage to have the desired result when i first load the page (if it's the index page the drawer is shown otherwise it's hidden), but when i change the page using the link in the drawer (nuxt js is using vue router in the background) the drawer preserves it's state.

I've made a quick middleware containing this:

export default ({store, route}) => {
  const mitem = store.state.menu.filter(item =>
                  item.to.indexOf(route.name) >= 0
                )[0]
  const title = mitem ? mitem.title : 'Home'

  store.commit('setPageTitle', title)
}

here's the store were are the state and mutations (the menu json file contains the entries with the following keys: { title, icon, to } )

import menu from '~json/menu.json'

export const state = () => ({
  menu,
  drawer: true,
  pageTitle: undefined
})

export const mutations = {

  toggleDrawer: state => {
    state.drawer = !state.drawer
  },

  setPageTitle: (state, title) => {
    state.pageTitle = title
    state.drawer = title === 'Home'
    console.log(state.drawer)
  }
}

And here's the layout

<template>
  <v-app>
    <v-navigation-drawer
      persistent
      v-model="drawer"
    >
      <v-list>
        <v-list-tile
          router
          v-for="(item, i) in menu"
          :key="i"
          :to="item.to"
        >
          <v-list-tile-action>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>{{ item.title }}</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
      </v-list>
    </v-navigation-drawer>
    <v-toolbar fixed>
      <v-toolbar-side-icon @click.native.stop="toggleDrawer" />
      <v-toolbar-title>{{ pageTitle }}</v-toolbar-title>
      <v-spacer></v-spacer>
    </v-toolbar>
    <main>
      <v-container fluid>
        <nuxt />
      </v-container>
    </main>
  </v-app>
</template>

<script>

import { mapState, mapMutations } from 'vuex'

export default {

  methods: {
    ...mapMutations([ 'toggleDrawer' ])
  },

  computed: {
    ...mapState([ 'menu', 'drawer', 'pageTitle' ])
  }
}

</script>

The console.log shows me that the state get updated, but as the state.drawer changes the component is not updated and the drawer remains present.

Any idea on what i'm doing wrong/how to tackle that issue? Thanks in advance

Seb

Answer 1

The v-navigation-drawer component by default watches for changes in $route . You can disable this functionality by adding the prop disable-route-watcher . Making this change will allow you to minutely control the state of the component.