Измените значение для v-модели из другого компонента с помощью vuex

Question

У меня есть 2 компонента 1. это боковая панель навигации 1. заголовок вверху, теперь я хочу щелкнуть от заголовка, чтобы закрыть, открыть боковую панель навигации От кода боковой панели:

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

в вычисленном iполучил значение обновления из действия заголовка.

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

Теперь я хочу обновить значение v-model 'sidebar'

Как я могу это сделать?

Спасибо.

Answer 1

я нашел простой ответ 1. просто измените v-model="sidebar" на :value = "sidebar" удалить боковую панель на data

Добавить боковую панель к вычисленному

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

Из заголовка просто добавьте действие

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

и создание мутаций и действий setDrawer в файле хранилища

что-то в этом роде

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