Хорошая практика для модификации vuex при начальной загрузке приложения

Question

Введение:
В настоящее время в приложении имеется несколько модулей для хранения данных, например:

- профиль
- модели
- продукты
- и т. Д.

... более поздние компоненты по разным маршрутам повторно используют и изменяют данные хранилища.

Проблема:
Когда приложение изначально загружено (независимо от того, какой маршрут или компонент), необходимо, чтобы определенная логика была выполнена для установки необходимого состояния хранилища.

Простой пример может быть:
В зависимости от возраста пользователя в профиле:
1. Найти определенную модель в моделях
2. И обновите данные профиля значениями из модели

Существуют методы, такие как created() или mounted() при создании компонента, так что это заставило меня задуматься о каком-то представительном контейнере под родительским маршрутом. Но мне интересно, может быть, есть разные виды хуков, которые нужно добавить при начальной загрузке приложения.

Answer 1

Вы обычно вводите свои исходные данные в хранилище из другого (постоянного) хранилища данных.Это может быть LocalStorage или внешний источник (например, REST API).

Один из способов сделать это - postpone создать приложение, пока хранилище не заполнится, а затем продолжить инициализацию приложения.

Код инициализации в main.js будет выглядеть примерно так:

import store from './store'

someAsyncTask()
.then( () => {
 new Vue({
   el: '#app',
   router,
   store,
   template: '<App/>',
   components: { App }
 })
})

Это означает, что пользователю нужно ждать, пока все загрузится, поэтому представление статического предзагрузчика (обычно добавляемого в index.html)хороший вариант.

Answer 2

Решение моей проблемы оказалось очень очевидным, но изначально ускользнуло от меня.Поскольку App (корневой компонент) передается в экземпляр Vue, вся логика, необходимая для манипулирования, может фактически выполняться там во время created или mounted методов.

Однако, если вы действительно полагаетесьна вызовах AJAX, которые необходимо разрешить до инициализации приложения, следует принять во внимание подход Раду Дита.