Page doesnt load when I define setter for drawer to dispatch toggleDrawer action in vue

Question

I have a Sidebar vue component that contains navigation drawer created using vuetify, it uses v-model to manage the state of the drawer, but state of drawer is stored in vuex, so that other components can modify drawer state. Therefore, v-model (in the sidebar) watches computed property showDrawer, but as soon as I define setter for the computed property showDrawer the page does not load, because the action in the setter keeps firing, why is this the case, what am I doing wrong?

I have tried using v-bind and @input instead of v-model for the computed property showDrawer but the same problem persists

Sidebar.vue

<template>
  <v-navigation-drawer v-model="showDrawer" class="sfm-sidebar" clipped dark disable-resize-watcher app width="290px">
  </v-navigation-drawer>
</template>


<script>
  export default {
    computed: {
      showDrawer: {
        get() {
          return this.$store.state.showDrawer;
        },
        set() {
          this.$store.dispatch("toggleDrawer");
        }
      }
    }
  }
</script>

Answer 1

I guess it will get stuck in an infinite loop!

Try to toggle state manually:

<template>
  <v-navigation-drawer v-model="showDrawer" class="sfm-sidebar" clipped dark disable-resize-watcher app width="290px">
  </v-navigation-drawer>
</template>


<script>
  export default {
    computed: {
      showDrawer: {
        get() {
          return this.$store.state.showDrawer;
        },
        set(value) {
          if (this.$store.state.showDrawer !== value)
            this.$store.dispatch("updateDrawer", value);
        }
      }
    }
  }
</script>

Then in store.js:

mutations: {
  updateDrawer(state, payload) {
    state.showDrawer = !!payload
  }
}