Создается из Vuejs вызывается каждую секунду

Question

Я посылаю EventBus из компонента, и он прослушивается несколько раз. Моя цель - вызвать метод при изменении определенного маршрута.

//First component  (App.vue -> from there I user router-view)
  watch: {
    $route(to, from) {
      if (from.name == "NewGame") {
        EventBus.$emit("changeRoute", true);
      }
    }
  },

//Second one
  created() {
    EventBus.$on("changeRoute", payload => {
      this.myMethod(); //this is called several times
    });
  },


- Ex. of flow:
- Access (on access I have a get request) and leave second component ->(EventBus is called) x1 
- If I do this again ->(EventBus is called) x2  
- Again ->(EventBus is called) x3 (and now I have 3 post request with 3 distinct data, that I get every time when I access the second component.)

Answer 1

Я нашел решение, которое работает для меня. Я должен пользователь $once insted из $on

EventBus.$once("changeRoute", payload => {
  this.myMethod();  //now is called just once
});

Answer 2

Добавьте следующее после вашего created():

destroyed() {
  EventBus.$off("changeRoute", payload => {
    this.myMethod();
  });
},

Обратите внимание, что вместо $on Я написал $off, это приведет к удалению прослушивателя событий. Убедитесь, что при подключении слушателя всегда удаляйте его при уничтожении компонента, иначе события будут регистрироваться несколько раз.

Не совсем уверен, что это решит вашу проблему, так как у нас нет полного контекста как вы используете компоненты, но, надеюсь, это решит вашу проблему.

Answer 3

В вашем первом компоненте, почему бы вам просто не использовать mounted или destroyed хуки для проверки необходимых изменений маршрута.

mounted() {
 if (this.$route.path === "NewGame") {
   EventBus.$emit("changeRoute", true);
 }
}