Как в Vue решается вопрос глобального контроля состояния компонентов?
Допустим, есть компонент "музыкальный плеер", воспроизводящий одну музыку и выводящий разметку плеера для управления воспроизведением. Есть, также, компонент-обёртка, в который передаётся массив объектов с параметрами плеера, и он в цикле "v-for" выводит на странице первый компонент. Этот родительский компонент следит за тем, чтобы внутри него два плеера не работали одновременно: хранит в себе индекс текущего плеера и по событию "play" из "$emit" останавливает его воспроизведение и даёт возможность воспроизводить другому.
Если вызвать компонент плеера в другом месте страницы без обёртки (или со своим компонентом-обёрткой), то этот контроль над воспроизведением будет потерян, и два плеера смогут воспроизводиться одновременно, так как нет общего глобального контроллера их состояния.
Как всегда стоит посмотреть документацию, прокрутите ниже и увидите рекомендуемые либы.
Паттерн шины событий можно использовать с помощью внешней библиотеки, реализующей интерфейс эмиттера событий, например mitt (opens new window)или tiny-emitter (opens new window).
Глобальное управление состоянием, например с помощью Vuex (opens new window).
Средний
