Vue 对外部点击做出 vuex 变异响应答案

【问题标题】：Vue make vuex mutation response to the outside clicksVue 对外部点击做出 vuex 变异响应
【发布时间】：2018-12-03 07:52:27
【问题描述】：

我遇到了一个问题，Vuex 处理状态更改由 Vuetify 导航抽屉在单击之外切换。

在下面的例子中，当你打开然后关闭抽屉后，你需要在一个按钮上点击两次才能再次打开它。

这是因为当你点击按钮时，状态会发生变化，但是当你关闭抽屉时（通过点击它外部）Vuex 无法识别状态变化，所以通常它是这样的：

'->' 表示点击

布尔值是状态值

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

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

感谢您的帮助！

【问题讨论】：

【解决方案1】：

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

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

然后添加方法：

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

【讨论】：

【解决方案2】：

也许尝试隐藏导航抽屉覆盖：

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

【讨论】：