Получение данных из другого компонента по созданному () VueJS

Question

Я борюсь с переключением между двумя местоположениями (Шотландия и Делавэр).

Я могу легко передавать и изменять содержимое каждой страницы при нажатии кнопки с использованием шины.

bus.$emit("contentChange", mainLocation);

Проблема в том, что страница загружается пустой, потому что кнопка в заголовке не была нажата.

Как передать переменную mainLocation из моего компонента заголовка на каждую страницу до отображения содержимого?

По умолчанию mainLocation должен быть «Делавэр».

Мой компонент заголовка используется в приложении. vue, чтобы сделать его доступным на каждой странице.

 <div id="app">
    <Header />
    <router-view />
    <Footer></Footer>
  </div>

Answer 1

Есть несколько способов справиться с этим

1. Вы можете emit событие при запуске. В вашем случае работает bus.$emit("contentChange", "Delaware"); Но у вас могут возникнуть проблемы с синхронизацией, если вы инициируете событие, но прослушивающие компоненты не инициализированы, тогда вы пропустите его.
2. Более надежный метод - использовать Vuex . Вы настроите свой магазин и запустите мутацию в начале, которая устанавливает местоположение по умолчанию. После этого любой компонент может использовать состояние для определения текущего выбранного местоположения.