NuxtJS и шина событий

Я пытаюсь создать событие из свойства экземпляра в nuxt, однако событие не отправляется и не принимается.

plugins/internal/bus.js

import Vue from 'vue';

const eventBus = {}

eventBus.install = function (Vue) {
  Vue.prototype.$bus = new Vue()
}

Vue.use(eventBus)

plugins/internal/index.js

import Vue from 'vue';

export default function (_ctx, inject) {
  const notify  = function (msg) {

    console.info('emitting', msg);

    setInterval(() => {
      this.$bus.$emit('add', msg);
    }, 500);
  }
   .bind(new Vue());

  inject('notify', notify);
}

nuxt.config.js

  plugins: [
    '~/plugins/internal/bus.js',
    '~/plugins/internal/index.js',
    ...
  ]

И в моем компоненте

  mounted() {
    this.$bus.$on('add', (val) => {
      console.info(val);
    })
    this.$bus.$on('close', this.onClose)
  },

При выполнении this.$notify({ foo: 'bar' }) свойство экземпляра вызывается правильно, однако либо событие не генерируется, либо не принимается, честно говоря, не знаю, как это отлаживать. Что мне здесь не хватает?

Для отладки используйте Vue devtools. Вы сможете увидеть, что излучается. Кстати, почему вы используете шину событий? Vuex чище и его проще отслеживать (следовательно, отлаживать). Ваш код кажется довольно сложным, есть ли причина? Если ваша проблема не может быть решена с помощью Vuex, я могу дать вам ссылку на доклад/статью, объясняющую, как вы могли бы добиться этого в Nuxt.

kissu 19.03.2022 14:13

Что ж, дальше я собирался попробовать Vuex, хотя не прочь взглянуть на упомянутую статью.

Simeon Aleksov 19.03.2022 18:13
Это видео и Эта статья.
kissu 19.03.2022 18:22

Спасибо, посмотрю. Я не мог найти много информации об использовании Vuex для отправки какого-либо события, есть ли какие-то ресурсы для этого?

Simeon Aleksov 19.03.2022 18:26

официальная документация по-прежнему лучшее место для посещения.

kissu 19.03.2022 18:29

Спасибо, хотя решение этого было очень глупым.. Я забыл зарегистрировать компонент Notification..

Simeon Aleksov 19.03.2022 22:17
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
6
42
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В конце концов, проблема исходила от компонента (Notification), который не был зарегистрирован должным образом.

Другие вопросы по теме