計算されたプロパティで状態が更新されるため、コンポーネントは更新されません。

Question

私は何が間違っているのか分かりません。 vue.jsの上にnuxt.jsを持つVuetifyフレームワークを使用しています

ナビゲーション・ドロワの初期状態は索引ページでは開きますが、他のページでは閉じてください。私は最初にページをロードするときに望みの結果を得ることができます（インデックスページであれば、それ以外の場合は非表示になります）。しかし、ドロワーのリンクを使ってページを変更すると（nuxt jsは背景）、引き出しはその状態を保持します。

私はこれを含む迅速なミドルウェアを作りました：

export default ({store, route}) => { 
    const mitem = store.state.menu.filter(item => 
        item.to.indexOf(route.name) >= 0 
       )[0] 
    const title = mitem ? mitem.title : 'Home' 

    store.commit('setPageTitle', title) 
} 

はここに店だ（メニューJSONファイルには、以下のキーを持つエントリが含まれています{ title, icon, to }）の状態と変異しているた

import menu from '~json/menu.json' 

export const state =() => ({ 
    menu, 
    drawer: true, 
    pageTitle: undefined 
}) 

export const mutations = { 

    toggleDrawer: state => { 
    state.drawer = !state.drawer 
    }, 

    setPageTitle: (state, title) => { 
    state.pageTitle = title 
    state.drawer = title === 'Home' 
    console.log(state.drawer) 
    } 
} 

そしてここでは、レイアウト

<template> 
    <v-app> 
    <v-navigation-drawer 
     persistent 
     v-model="drawer" 
    > 
     <v-list> 
     <v-list-tile 
      router 
      v-for="(item, i) in menu" 
      :key="i" 
      :to="item.to" 
     > 
      <v-list-tile-action> 
      <v-icon>{{ item.icon }}</v-icon> 
      </v-list-tile-action> 
      <v-list-tile-content> 
      <v-list-tile-title>{{ item.title }}</v-list-tile-title> 
      </v-list-tile-content> 
     </v-list-tile> 
     </v-list> 
    </v-navigation-drawer> 
    <v-toolbar fixed> 
     <v-toolbar-side-icon @click.native.stop="toggleDrawer" /> 
     <v-toolbar-title>{{ pageTitle }}</v-toolbar-title> 
     <v-spacer></v-spacer> 
    </v-toolbar> 
    <main> 
     <v-container fluid> 
     <nuxt /> 
     </v-container> 
    </main> 
    </v-app> 
</template> 

<script> 

import { mapState, mapMutations } from 'vuex' 

export default { 

    methods: { 
    ...mapMutations([ 'toggleDrawer' ]) 
    }, 

    computed: { 
    ...mapState([ 'menu', 'drawer', 'pageTitle' ]) 
    } 
} 

</script> 

です状態は更新されますが、state.drawerが変更されると、コンポーネントは更新されず、引き出しが残ったままになります。

私が間違ってやっていることに関するアイデア/その問題に取り組む方法は？事前に おかげ

セブ

Answer 1

$ルートの変化のためのデフォルトの時計によってv-navigation-drawerコンポーネント。この機能を無効にするには、disable-route-watcherという小文字を追加します。この変更を行うと、コンポーネントの状態を細かく制御できます。