Vuex $ store.watch添加和删除eventListener

Question

这是我在mounted()中的商店监视者：

  this.$store.watch(
    (state, getters) => state.windowState && state.chatState == 0,
    (val, oldVal) => {
      if (val) {
        console.log('state is true')
        this.$refs.chatAuth.addEventListener('keydown', this.pressEnterChatAuth)
      } else {
        console.log('state is false')
        this.$refs.chatAuth = null
      }
    }
  )

windowState-是布尔值， chatState-是一个数字值，例如0、1、2

在我的情况下，如果windowState变成true并且chatState变成1，我的事件监听器仍然存在，它不会被删除。不知道。是否可以同时$store.watch 2个状态或获取方法？

在chatState为1的情况下，我会收到控制台消息“状态为false”，但监听器仍在这里，哦，哦。

我的想法

我怀疑当观察到的值返回false时，this.$refs.chatAuth已从DOM中删除，因为它是有条件渲染的，具体取决于chatState，所以我的else块被执行了，但是设置了{ {1}}对不存在的元素无效，因为已经从DOM中删除了它，但是如果已经将其删除，那么为什么侦听器仍在工作？

Answer 1

使用Vue本机事件侦听器解决此问题：

<div @keydown.enter.exact="pressEnterChatAuth" class="chat__auth"></div>

那太明显了，大声笑。无需麻烦addEventListener。