Vue объект, переданный через emit, не распознается после прослушивания в другом компоненте

Question

У меня есть два компонента, скажем, компонент A и компонент B. В componentA у меня есть событие click, которое запускает метод, который передал пользовательский объект в качестве аргумента, и этот объект затем генерируется с использованием шины событий. Когда я успешно прослушал объект emit в componentB, я назначил объект, который был передан переменной, я console.log вывел переменную, в которой он показывал объект, но когда я снова console.log, переменная за пределами Event. объект исчез. Любая помощь будет оценена :) Спасибо!

Вот мой код:

Componenta

showUserStats(user) {
    EventBus.$emit('userInfo', user);
    this.$router.push({
      name: 'componentB',
      params: { id: user._id }
    })
  }

componentB

created() {
      EventBus.$once('userInfo', (user) => {
        this.userInfo = user
        console.log('userInfo', this.userInfo);
      });
      console.log('userInfo outside EventBus', this.userInfo);
    }

Вот изображение с выхода

Answer 1

Это происходит потому, что вы входите в консоль при событии жизненного цикла created. Журнал консоли вне вызова $once вызывается сразу при создании компонента (когда информация о пользователе не назначена), но файл console.log внутри $once происходит только тогда, когда событие отправлено, и, в свою очередь, переменная / данные назначены.

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

Что касается вычисленного значения, оно должно работать, поскольку оно будет обновляться при назначении пользовательской информации, но вам нужно будет добавить проверку, если это не так, что-то вроде этого:

computed: {
  fullName () {
    return this.userInfo ? this.userInfo.name + ' ' + this.userInfo.surname : ''
  }
}

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