由于状态更新的计算属性组件不更新

我不明白我做错了什么。我在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

由于状态更新的计算属性组件不更新

回答

相关问题