vue.js - v-navigation-drawer 在窗口调整大小时掉入失控循环

Question

首先，让我说 v-navigation-drawer 按预期工作，即:

• 在单击 汉堡包菜单时，TOGGLE_DRAWER 突变被提交，它切换打开/关闭，更新状态。
• 在调整窗口大小时，它会在指定的断点处打开/关闭

所以它有效。

但是 窗口大小调整没有正确切换突变，当我调整窗口大小时我不断收到 Vuex 突变错误:

我明白为什么我会收到这个错误 - $store.state.ui.drawer 正在修改器之外进行修改(它是 v-navigation-drawer 的 v-model ):

<v-navigation-drawer
        v-model="$store.state.ui.drawer"
        app
        clipped
    >

我知道将状态绑定(bind)到 v-model 是一种错误的形式。但是，当我尝试使用 get() 和 set() 方法制作一个 drawer 计算属性时，可以正确获取/提交突变，浏览器崩溃(大概是因为 set 方法触发了提交的无限循环，将 drawer true/false 切换为无穷大):

computed: { 
            drawer: {
                get () {
                    return this.$store.state.ui.drawer
                },
                set () {
                    this.$store.commit('TOGGLE_DRAWER') // <--crashes the browser
                }
            }
        }

我一直在无休止地寻找这个问题的解决方案。尽管它在视觉上看起来很有效，但它让我很烦。

我考虑过在 stateless 中运行 v-navigation-drawer模式并手动处理所有窗口调整大小事件和状态更新。我还考虑过在 Vuex 中禁用“严格”模式(这会隐藏错误)。但前者要复杂得多，而后者是一个创可贴，让我在开发中调试洞察力。

Answer 1

这听起来很适合 Lodash's debounce功能。如果您在应用此效果时需要坚持使用 setter/getter，请查看 this post ;否则，this one用于任何生命周期 Hook 上的顺序事件订阅。