Here's the section where I'm monitoring my store using 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 represents a boolean value,
chatState represents a numerical value such as 0, 1, or 2.
In this scenario, even if windowState switches to true and chatState changes to 1, the event listener remains active. This issue has me puzzled. Can we actually use $store.watch for two states or getters simultaneously?
When chatState equals 1, I receive a console message saying "state is false", but the listener persists in spite of that.
My Analysis
I have a suspicion that once a watched value goes back to false, this.$refs.chatAuth might have been removed from the DOM. This element is conditionally rendered based on the chatState, so even though my else block runs and sets it to null, it may not have any effect as the element was already taken out from the DOM. If that's the case, then why does the listener continue to work?