Как сначала получить данные с сервера, а лишь затем отрисовать страницу с полученными данными?

Question

[Riley Usagi]

У меня есть вполне себе рабочий модуль на Vuex и как-то не ахти работающий компонент на Vue

Проблема, судя по всему, заключается в неправильном подходе к получению и передаче данных в компоненте из модуля в темплейт.

Что я только не пробовал: beforeCreated, created, mounted и прочие methods.

Но несмотря на то, что запрос на данные через dispatch проходит успешно и данные ... где-то сохраняются, судя по заверениям закладки Vue в инструментах разработчика браузера - на экран они выводиться на хотят.

Хотя стоит заметить, что при внесении любого изменения в файл компонента при включённом - npm run dev данные автоматически появляются на странице.

И здесь, как говорится: наши полномочия всё.

Answer 1

[lavezzi1]

Заводите state isItemsReady в модуле с значением false, после того как данные стянулись и сохранились, тригерите его в true. Это вам понадобиться на страницах/компонентах, чтобы узнать что данные готовы, можно пока isItemsReady false крутить спиннер.

Дальше в своем компоненте заводите computed свойство:
items: { return this.$store.getters.items }

и удаляете items из data.

Все.

Comments

[Riley Usagi]

Как-то очень пространно написано. Так толком ничего и не понял.

Потыкался часок, но так ничего и не вышло.

Очень прошу: накидайте рабочий пример.
Заранее благодарю.

[lavezzi1]

RileyUsagi, читайте документацию. Гуглите примеры, их тысячи.

[Riley Usagi]

lavezzi1, простите, но я уже четвёртые сутки над этим бьюсь.

Просмотрел порядка 20 часов разнообразных видео, прсмотрел те самые - тысячи примеров, но так и не смог справиться с этой задачей.

Не знаю, возможно всё специально так запутано.

[Riley Usagi]

lavezzi1, опять же - буду благодарен, если вы сможете указать хоть на один рабочий пример реализации поставленной задачи.
Увы, я, за несколько дней, так и не смог убедиться в том, что хоть кто-либо в интернете с этим справился.

[lavezzi1]

Riley Usagi, Накидал элементарный пример, отталкивайтесь от него https://jsfiddle.net/4x5rhy8c/

[Riley Usagi]

Как-то даже неудобно на это указывать после стольких стараний, но это Vue, а не Vuex =)

На Vue и у меня всё работает как часы. А вот с модульной структурой совсем беда. В этом и проблема. Стейты, экшены, гетеры, мутации - вот это всё.

[Riley Usagi]

Блинский блин.
Не поноешь - не получится =)

Нашёл рабочий вариант (без Actions, правда) вот здесь.

Огромное спасибо lavezzi1 за помощь и наводки.
Отмечу ваш ответ решением.

[lavezzi1]

Riley Usagi, vuex это просто store для Vue. Берем и прикручиваем https://jsfiddle.net/4x5rhy8c/1/

[Riley Usagi]

Ты спас мой мозг и карьеру)