Window/onload 이벤트를 사용하여 Vue Store에서 작업을 디스패치할 수 있습니까?

Window/onload 이벤트를 사용하여 Vue Store에서 작업을 디스패치할 수 있습니까?

Vuex 스토어 작업을 발송하기 위해 이벤트 수신기를 언로드에 추가하여 닫히는 창의 ID를 알려주려고 합니다.(이 앱은 리소스 사용으로 인해 열려 있는 탭의 수를 제한해야 하는 앱으로, 일부 가상화/에뮬레이션 작업을 수행하고 있습니다.)

저는 MDN 페이지에서 거의 바로 해제된 간단한 언로드 이벤트 청취자 해고를 성공적으로 얻을 수 있었습니다.

  window.addEventListener("beforeunload", function(event) {
    event.preventDefault();
    // problem line 
    this.$store.dispatch('CURR_TERMINAL_ACTION', this.id)
  })

상점에서 계속 정의되지 않았기 때문에 상점과 창 개체가 서로 통신할 수 없을 것 같습니다. 이 함수에 인수로 전달하려고 해도 액세스를 제공할 수 있을 것 같습니다.

관련 노트:대신에 Vue의 파괴 라이프사이클 후크로 이를 달성할 수 있다고 생각했습니다. (아마도 Destroy() 이전일 것입니다.)그러나 이 구성 요소는 실행될 때마다 새 브라우저 탭으로 실행됩니다.탭을 닫으면 구성 요소 파괴가 발생하지 않습니다.문서를 보니 구성 요소를 수동으로 파괴해야 하는 것 같습니다. 그렇지 않으면 마운트 해제만 됩니다.나의 원래 온로드 이벤트도 $store에 액세스할 수 없다면 $destroy와 상호 작용할 수 없다고 생각합니다.

당신의 코드에서this창문, 또는 당신의 것 이외의 것을 가리킵니다.vue-component그런 다음 다른 변수를 만들어야 합니다.vue-component언급.

let that = this
window.addEventListener("beforeunload", function(event) {
    event.preventDefault();
    // problem line 
    that.$store.dispatch('CURR_TERMINAL_ACTION', that.id)
})

언급URL : https://stackoverflow.com/questions/54223849/can-a-window-onunload-event-be-used-to-dispatch-an-action-in-vue-store