Блог

Главная - Вопросы по программированию - Хорошая практика для изменения vuex при начальной загрузке приложения

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

#vue.js #vuejs2 #vuex #vue-router

#vue.js #vuejs2 #vuex #vue-маршрутизатор

Вопрос:

Введение:

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

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

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

Проблема:

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

Простым примером может быть:

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

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

Комментарии:

1. Я думаю, что вы ищете компоненты без визуализации, в которые вы можете поместить логику загрузки вашего модуля, а затем обернуть свои маршруты? Я использую созданный хук для загрузки или повторного использования модулей vuex

Ответ №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 ) является хорошим вариантом.

Ответ №2:

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

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