vuex에서 이벤트 개체를 "vuex"로 보내시겠습니까?

vuex에서 이벤트 개체를 "vuex"로 보내시겠습니까?

만약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);
  },
}

문제는 당신이 새로운 익명 기능을 각 통화마다 만든다는 겁니다.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
  }
}

참조URL: https://stackoverflow.com/questions/65369945/send-event-object-via-dispatch-in-vuex