Vue对外部点击做出vuex突变响应

Question

我遇到了Vuex处理状态更改的问题，该状态更改由Vuetify导航抽屉在单击之外触发。

在下面的示例中，打开然后关闭抽屉后，您需要在按钮上单击两次以再次将其打开。

这是因为当您单击按钮时，状态会发生变化，但是当您关闭抽屉时（通过在抽屉外部单击），Vuex无法识别状态变化，因此通常情况如下：

'->'表示单击

布尔值是状态值

False（初始值）-> True（显示）->（外部）True（保持相同）-> False（更改为false，因为我们单击触发功能的按钮=>抽屉保持关闭状态）- > True（应更改状态）

有什么办法可以解决这个问题？我的意思是，我需要让Vuex突变识别外部点击

感谢帮助！

DEMO ON CODESANDBOX

Answer 1

也许尝试隐藏导航抽屉叠加层：

<v-navigation-drawer :value="active" temporary hide-overlay="true">

Answer 2

只需添加输入事件即可在抽屉值更改时更改状态：

<v-navigation-drawer :value="active" @input="setDrawer">

然后添加方法：

methods: {
   setDrawer(e) {
      this.$store.dispatch("setDrawerState", e);
    }
  },