由於狀態更新的計算屬性組件不更新

我不明白我做錯了什麼。我在vue.js之上使用了帶有nuxt.js的Vuetify框架。由於狀態更新的計算屬性組件不更新

我希望導航抽屜的初始狀態在索引頁面上打開，但在其他頁面上關閉。當我第一次加載頁面時（如果它是顯示抽屜的索引頁面，否則它是隱藏的），我可以設法獲得所需的結果，但是當我使用抽屜中的鏈接更改頁面時（nuxt js正在使用vue路由器背景）抽屜保留它的狀態。

我做了包含一個快速的中間件這樣的：

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>

的console.log向我顯示狀態得到更新，但隨着state.drawer更改，組件未更新並且抽屜仍然存在。

任何想法我做錯了/如何解決這個問題？在此先感謝

勒布

來源

2017-07-30 zedryas

的v-navigation-drawer組件在默認情況下手錶在$路線變化。您可以通過添加道具disable-route-watcher來禁用此功能。進行此更改將允許您精確控制組件的狀態。

來源

2017-08-17 22:41:37

由於狀態更新的計算屬性組件不更新

回答

相關問題