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.