Vue: слушатель события beforeunload не удаляется - PullRequest
Новая
       33

Vue: слушатель события beforeunload не удаляется

0 голосов
/ 02 апреля 2020

Я работаю над функцией отмены удаления, она состоит из небольшого модального окна, которое позволяет пользователю отменять / задерживать действие на ограниченное время (аналогично gmail). Однако я хочу убедиться, что действие выполняется, если пользователь решает перейти в другое окно или закрыть вкладку, что я делаю так: 

mounted() {
  this.timeout = setTimeout(() => {
    this.close(true);
  }, this.duration);
  window.addEventListener('beforeunload', this.forceDestroyHandler, { capture: true });
},
methods: {
  close(deleteBeforeClosing) {
    if (deleteBeforeClosing) {
      clearTimeout(this.timeout);
      // This is the function dispatching to the store and deleting the item
      this.destructiveEvent(this.category, this.item.id);
    }
    this.$emit('close');
}

Затем я (пытаюсь) удалить прослушиватель событий beforeDestroy: 

beforeDestroy() {
  this.forceDestroy();
  window.removeEventListener('beforeunload', this.forceDestroyHandler, {capture: true});
},

Однако, похоже, что beforeDestroy никогда не вызывается, то есть прослушиватель событий никогда не удаляется - поэтому, если пользователь решит закрыть вкладку или перейти, ему будет выдано сообщение даже хотя компонент отмены больше не отображается. Если пользователь нажмет кнопку «Отмена», в хранилище будет отправлено другое действие, пытающееся удалить уже удаленный элемент, вызывающий ошибку сервера.

Я также пытался поместить removeEventListener в другое место, но у меня продолжает та же проблема.

1 Ответ

1 голос
/ 02 апреля 2020

Чтобы еще более подробно остановиться на моем комментарии: причина, по которой ваш onbeforeunload прослушиватель событий не является несвязанным, заключается в том, что ловушка beforeDestroy() жизненного цикла запускается только при уничтожении компонента VueJS. Когда вы закрываете вкладку / окно браузера, весь поток стирается, и это не вызывает уничтожение компонента.

Поскольку вы хотите удалить слушателя только после закрытия модального режима, имеет смысл сделать это в close() метод: отсюда и почему вы подходите.

...