Можно как-то задать порядок инициализации vue компонентов?

Question

[Andrey Suha]

есть такая структура

<div id="app">
        <first-component></first-component>
        <second-component></second-component>
        <third-component></third-component>
    </div>

Регаются компоненты так

Vue.component("first-component", () => import(`first-component-path.vue`));
Vue.component("second-component", () => import(`second-component-path.vue`));
Vue.component("third-component", () => import(`third-component-path.vue`))

Внутри first-component реситриуется модуль в vuex который потом используется в двух други компонентах. Проблема в том что third-component инициализируется раньше двух остальных соответсвенно на момент его инициализации еще не существует модуля в vuex и при поытке обращения к нему я получаю ошибку. Как это можно исправить?

Answer 1

[Alex]

При такой архитектуре — нельзя.
У вас три асинхронных компонента. Каждый компонент загружается независимо, и отображается тогда, когда будет загружен. Ваши компоненты должны оставаться абсолютно независимыми друг от друга.

Ваша проблема в том, что модуль в vuex зависит от компонента. А так быть не должно. Загружайте vuex раньше и только потом инициализируйте компоненты.

Comments

[Andrey Suha]

Спасибо

[Aetae]

Andrey Suha, выше всё правильно написано, но вам также следует понимать, что загрузка компонентов - это не какие-то магические заклинания, это обычные асинхронные функции. Соответственно и порядок, если очень хочется, можно всегда задать:

const loadFirst = () => import(`first-component-path.vue`);

Vue.component("first-component", loadFirst);
Vue.component("second-component", async () => {
  await loadFirst();
  return import(`second-component-path.vue`);
});
Vue.component("third-component", () => loadFirst().then(() => import(`third-component-path.vue`)))

[Andrey Suha]

Aetae, да я понимаю, я же их туда и добавил)) собственно и думал что так так можно сделать, но все что не получалось. Добавьте в ответ посеву верным