Change value fo v-model from other component with vuex

Question

I have 2 components 1. it is sidebar navigation 1. header on the top, now i want to click from header to close, open sidebar navigation From sidebar code:

<v-navigation-drawer
    :clipped="$vuetify.breakpoint.lgAndUp"
    fixed
    v-model="sidebar"
    app
    v-if="$store.state.isUserLoggedIn"
  >

in the computed i got the the update value from header action.

computed: {
    ...mapState([
      'sidebar'
    ])
  },

Now i want to update the value of v-model 'sidebar'

How can i do it?

Thanks.

Answer 1

i have found the simple answer 1. just change v-model="sidebar" to :value = "sidebar" remove sidebar on the data

Add sidebar to computed

computed: {
    ...mapState([
      'sidebar'
    ]),
  },

From the Header just add the action

this.$store.dispatch('setDrawer', !this.$store.state.sidebar)

and create mutations and actions setDrawer in store file

some kind like that

state: {
    sidebar: true
  },
mutations: {
 setDrawer (state, sidebar) {
      state.drawer = sidebar
    }
} 
actions: {
setDrawer ({commit}, sidebar) {
      commit('setDrawer', sidebar)
    }
}