Vuetifyでオーバーレイされたコンポーネントの状態を管理する

Question

初めてvuetify/nuxtフロントエンドを構築しました。default.vueレイアウトからv-navigation-drawerコンポーネントを移動して、独自のコンポーネントで再利用できるようにしました複数のレイアウトで

この引き出しのための活性化因子は、まだdefault.vueコンポーネントのまま、私はvuexするsidebar状態を追加しました：

export const state =() => ({ 
    baseurl: 'http://example.com/api/', 
    sidebar: false, 
    authenticated: false, 
    token: null, 
    user: null, 
}) 

サイドバーのためのmutatorはそうのようになります。

export const mutations = { 
    toggleSidebar(state) { 
     state.sidebar = !state.sidebar; 
    } 
} 

これは動作します（オーバーレイをオフにしていれば）サイドバーをクリックすると、vuexは大きなエラーを投げます：

vuexでこの作業を正しく行うにはどうすればよいですか？

Answer 1

代わりの$store.state.sidebarに直接引き出しのモデルを結合、引き出しのコンポーネントで計算されたセッターを使用します。

<template> 
    <v-navigation-drawer v-model="drawer" ...> 
</template> 

<script> 
    export default { 
    computed: { 
     drawer: { 
     get() { 
      return this.$store.state.sidebar 
     }, 
     set (val) { 
      this.$store.commit('sidebar', val) 
     } 
     } 
    } 
    } 
</script> 

https://vuejs.org/v2/guide/computed.html#Computed-Setter
https://vuex.vuejs.org/en/forms.html