CODEWITHSUNDEEP
javascriptvue.js
anokhindev
anokhindev

Reputation: 107

How do I make a state change?

I made two different components. in one v-navigation-drawer the second has a button that changes the States of v-navigation-drawer in vuex.

When on small screens, there is a call to v-navigation-drawer, and after clicking on the gray area, the state in vuex does not change. 

enter code here

drawer.vue

<template>
    <v-navigation-drawer
        fixed
        :value="drawer"
        app
        :class="getSettingsTheme"
        :mini-variant="mini"
        >
    <b>menu</b>
   </v-navigation-drawer>
</template>

sitebar.vue

<template>
    <v-toolbar fixed app clipped-right :class="getSettingsTheme">

        <v-tooltip right>
            <v-btn slot="activator" icon @click.stop="drawerMut">
                <v-icon class="theme--light grey--text" color="grey lighten-1">menu</v-icon>
            </v-btn>
            <span>Show/Hide drawer</span>
    </v-tooltip>

  </v-toolbar>
</template>

vuex

export default new Vuex.Store({
state: {
    drawer: true,
},
mutations: {
    drawerMut(state) {
        state.drawer = !state.drawer
    }
},
getters: {
    drawer(state) {
        return state.drawer 
    },
}})

Upvotes: 0

Views: 100

Answers (1)

nmanikiran
nmanikiran

Reputation: 3158

You can read the drawer state from the store and update to the store

in Vue we have computed setter please go through the docs.

if you use :value then on backdrop click the state/value of the drawer won't be updated, so use v-model with drawer as computed with setter and getter.

export default {
    data() {
      return {
        mini: true,
        getSettingsTheme: ''
      }
    }
    computed: {
      drawer: {
        get() {
          return this.$store.getters['drawer'];
        },
        set(val) {
          this.$store.commit('drawerMut', val);
        },
      }
    }
  }
<template>
  <v-navigation-drawer fixed
                       v-model="drawer"
                       app
                       :class="getSettingsTheme"
                       :mini-variant="mini">
    <b>menu</b>
  </v-navigation-drawer>
</template>

Upvotes: 1

Related Questions