由于状态在计算属性中更新，组件不会更新答案

【问题标题】：As the state is updated in a computed property component does not update由于状态在计算属性中更新，组件不会更新
【发布时间】：2018-01-06 10:24:54
【问题描述】：

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

console.log 向我显示状态已更新，但随着 state.drawer 的更改，组件未更新且抽屉仍然存在。

知道我做错了什么/如何解决这个问题吗？提前致谢

Seb

【问题讨论】：

标签： javascript vue.js nuxt.js vuetify.js

【解决方案1】：

v-navigation-drawer 组件默认监视 $route 的变化。您可以通过添加 disable-route-watcher 属性来禁用此功能。进行此更改将允许您精确控制组件的状态。

【讨论】：