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

Question

我不明白我做错了什么。我在 vue.js.

之上使用 nuxt.js 的 Vuetify 框架

我希望导航抽屉的初始状态在索引页面上打开但在其他页面上关闭。当我第一次加载页面时，我可以设法获得所需的结果（如果它是索引页面，则显示抽屉，否则它被隐藏），但是当我使用抽屉中的 link 更改页面时（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 更改，组件未更新，抽屉仍然存在。

知道我正在做什么 wrong/how 来解决这个问题吗？提前致谢

塞布

Answer 1

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

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

As the state is updated in a computed property component does not update

javascript

vue.js

nuxt.js

vuetify.js

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

As the state is updated in a computed property component does not update

javascript

vue.js

nuxt.js

vuetify.js

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