Как удалить слушатель события window.matchMedia (vue)?

190

17 июля 2021, 20:10

В methods есть функция, внутри которой присваивается слушатель на window.matchMedia().

Если переходить между страницами, то слушатели умножаются.

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

beforeDestroy() {
    // Этот хук специально, чтобы уничтожать обработчики событий
    // Но я не понимаю, как мне удалить здесь нужные
    // this.$off() не работает
},
methods: {
    checkMedia() {
        let phone = window.matchMedia("(max-width: 599px)")
        const mediaHandler = () => {
        // Обработка в зависимости от ширины страницы
        }
        // Вызов обработчика, чтобы срабатывало при загрузке страницы
        mediaHandler()
        // Слушаем событие change
        // Именно его мне нужно удалить в хуке beforeDestroy
        phone.addListener(mediaHandler)
    }
}

Answer 1

        data(){
          return{
            phone: null,
          }
        },
        methods: {
          checkMedia() {
             this.phone = window.matchMedia("(max-width: 599px)")      
             this.phone.addListener(this.mediaHandler)
          },
          mediaHandler(){
            console.log(123)
          }
        },
        beforeDestroy(){
          this.phone.removeListener(this.mediaHandler)
        }