在vuex中通过`dispatch`发送事件对象？

【问题标题】：send event object via `dispatch` in vuex?在vuex中通过`dispatch`发送事件对象？
【发布时间】：2021-03-29 20:52:07
【问题描述】：

如果传递了addEventListener 回调，例如，通过箭头函数，那么一切正常，但是我无法通过removeEventListener 删除侦听器。

export const actions = {
  open() {
    document.querySelector('nav').classList.add('open')
    document.addEventListener('click', (e) => this.dispatch('clickListener', e))
  },
  close() {
    document.querySelector('nav').classList.remove('open')
    document.removeEventListener('click', (e) => this.dispatch('clickListener', e))
  },
  toggle() {
    if (document.querySelector('nav').classList.contains('open')) {
      this.dispatch('close')
    } else {
      this.dispatch('open')
    }
  },
  clickListener(ctx, e) {
    console.log(e);
  },
}

【问题讨论】：

标签： javascript vue.js events event-handling vuex

【解决方案1】：

问题是您在每次调用addEventListener 和removeEventListener 时都创建了一个新的匿名函数，因此removeEventListener 无法找到最初创建的回调。

缓存传递给addEventListener的创建回调，而不是内联匿名函数，以便稍后将缓存结果传递给removeEventListener：

let clickHandler = null

export const actions = {
  open() {
    // remove any existing callback (null ignored)
    document.removeEventListener('click', clickHandler)

    clickHandler = (e) => this.dispatch('clickListener', e)
    document.addEventListener(j'click', clickHandler)
  },
  close() {
    document.removeEventListener('click', clickHandler)
    clickHandler = null
  }
}

【讨论】：