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

Posted 2023-02-23

【中文标题】v-navigation-drawer 在窗口调整大小时掉入失控循环

【英文标题】：v-navigation-drawer drops into a runaway loop on window resize

【发布时间】：2020-01-18 22:31:39

【问题描述】：

首先，让我说 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
    >

我认为将状态绑定到 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 中禁用“严格”模式（这会隐藏错误）。但前者要复杂得多，而后者是一个创可贴，需要我在开发中调试洞察力。

【参考方案1】：

这听起来像是 Lodash's debounce 函数的完美候选者。如果您在应用此效果时需要坚持使用 setter/getter，请查看this post；否则，this one 用于任何生命周期钩子上的顺序事件订阅。

【参考方案2】：

在花了一些时间之后，我想我有一个解决方案。想要分享给其他可能面临 VNavigationDrawer 相同问题的人，使用 Vuex 状态来控制可见性。

@input 事件传递了一个val 参数，其中包括窗口调整大小后抽屉的状态。我创建了一个由以下函数调用的新操作：

<v-navigation-drawer
    :value="$store.state.ui.drawer"
    app
    clipped
    @input="updateDrawer($event)"
>

这里是被调度的动作：

methods: 
    updateDrawer(event) 
        if (event !== this.drawer)  // avoids dispatching duplicate actions; checks for unique window resize event
            this.$store.dispatch('updateDrawer',event)
        
    
,

并且该操作将新的val 提交到 Vuex 存储。

基本上，输入事件能够监视抽屉的更新，并在必要时更新抽屉状态。

您还会在上面看到，我固执地接受使用:value 作为docs suggest，尽管我认为这应该由 v-model 控制。

似乎正在工作 - 调用了正确的事件并适当地更新了状态。