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 - 是一个bool值，chatState - 是一个数字值，如0,1,2

在我的情况下，如果windowState变成true并且chatState变为1，我的事件监视器仍然存活，它不被删除。想不通。是否有可能同时$store.watch 2州或吸气鬼？

如果chatState为1，我收到控制台消息“状态为假”，但是听众仍在这里，omg。

我的想法

我怀疑当观察值返回false时，this.$refs.chatAuth已经从DOM中移除，因为它有条件地渲染，取决于chatState，所以我的else块被执行，但是在非现有元素上设置null没有效果，因为它已经从DOM，但如果它已被删除，那么为什么监听器仍在工作？

Answer 1

使用Vue本机事件侦听器解决了这个问题：

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

那太明显了，哈哈。没有必要与addEventListener麻烦。