当我为抽屉定义 setter 以在 vue 中调度 toggleDrawer 操作时，页面未加载答案

【问题标题】：Page doesnt load when I define setter for drawer to dispatch toggleDrawer action in vue当我为抽屉定义 setter 以在 vue 中调度 toggleDrawer 操作时，页面未加载
【发布时间】：2019-08-24 08:46:15
【问题描述】：

我有一个侧边栏 vue 组件，其中包含使用 vuetify 创建的导航抽屉，它使用 v-model 来管理抽屉的状态，但抽屉的状态存储在 vuex 中，以便其他组件可以修改抽屉状态。因此，v-model（在侧边栏中）监视计算属性 showDrawer，但是一旦我为计算属性 showDrawer 定义了 setter，页面就不会加载，因为 setter 中的操作一直在触发，为什么会这样，是什么我做错了吗？

我已经尝试使用 v-bind 和 @input 而不是 v-model 来计算属性 showDrawer，但同样的问题仍然存在

Sidebar.vue

<template>
  <v-navigation-drawer v-model="showDrawer" class="sfm-sidebar" clipped dark disable-resize-watcher app width="290px">
  </v-navigation-drawer>
</template>


<script>
  export default {
    computed: {
      showDrawer: {
        get() {
          return this.$store.state.showDrawer;
        },
        set() {
          this.$store.dispatch("toggleDrawer");
        }
      }
    }
  }
</script>

【问题讨论】：

标签： vue.js vuex vuetify.js

【解决方案1】：

我猜它会陷入无限循环！

尝试手动切换状态：

<template>
  <v-navigation-drawer v-model="showDrawer" class="sfm-sidebar" clipped dark disable-resize-watcher app width="290px">
  </v-navigation-drawer>
</template>


<script>
  export default {
    computed: {
      showDrawer: {
        get() {
          return this.$store.state.showDrawer;
        },
        set(value) {
          if (this.$store.state.showDrawer !== value)
            this.$store.dispatch("updateDrawer", value);
        }
      }
    }
  }
</script>

然后在store.js:

mutations: {
  updateDrawer(state, payload) {
    state.showDrawer = !!payload
  }
}

【讨论】：