Можно ли использовать событие Window / onunload для отправки действия в Vue Store

Question

Я пытаюсь добавить прослушиватель событий onunload для отправки действия хранилища Vuex, сообщая мне идентификатор закрываемого окна.(Это приложение, в котором нам нужно ограничить количество открытых вкладок из-за потребления ресурсов - оно выполняет некоторые вещи виртуализации / эмуляции.)

Мне удалось успешно получить простое срабатывание прослушивателя событий onunload, поднятое почти напрямуюсо страницы MDN об этом.

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

Похоже, что хранилище и объект окна не смогут взаимодействовать друг с другом, так как я продолжал получать неопределенное значение в хранилище, даже когда пытался передать его в качестве аргумента этой функциидумая, что, может быть, я мог бы предоставить доступ таким образом.

На заметку: я подумал, что, возможно, я мог бы попытаться сделать это с помощью хука жизненного цикла уничтожения Vue, вместо этого.(beforeDestroy (), вероятно.) Однако каждый раз, когда этот компонент запускается, он запускается в новой вкладке браузера.Когда я закрываю эту вкладку, она не вызывает разрушение компонента.Посмотрев документы, кажется, что вам придется вручную уничтожать компоненты, иначе они будут размонтированы.Я не думаю, что мое исходное событие onunload может взаимодействовать с $ destroy, если оно не может получить доступ к $ store.

Answer 1

В вашем коде 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)
})