Question

我不明白我做错了什么。我在vue.js上使用了Vuetify框架和nuxt.js。

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

关于我做错了什么/如何解决这个问题的任何想法？提前致谢

的Seb

Answer 1

默认情况下，v-navigation-drawer组件会监视 $ route 中的更改。您可以通过添加prop disable-route-watcher 来禁用此功能。进行此更改将允许您精确控制组件的状态。

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

1 个答案: