Vue make vuex mutation response to the outside clicks

Question

I'm facing an issue with Vuex handling state changes toggled by Vuetify navigation drawer outside click.

In the example below, after you open and then close drawer, you need to click twice on a button to open it again.

It's because when you click on button, state changes, but when you close the drawer(by clicking outside of it) Vuex doesn't recognize the state change, so typically it goes like this :

'->' means click

Booleans are the state values

False(initial value) -> True(shown) ->(outside) True(remains the same) -> False(changes to false, as we click on the button that triggers function => the drawer remains closed) -> True(state changes as it should)

Is there any way to fix this? I mean, I need to get Vuex mutation recognize outside clicks

Thanks for help!

DEMO ON CODESANDBOX

Ron Ron · Accepted Answer · 2020-06-12T12:36:27

Just add input event to change the state when drawer value changes:

<v-navigation-drawer :value="active" @input="setDrawer">

and then add method:

methods: {
   setDrawer(e) {
      this.$store.dispatch("setDrawerState", e);
    }
  },

Vue make vuex mutation response to the outside clicks

2 Answers