Как добиться асинхронности от getter?

Question

У меня проблема. Есть action в котором я делаю запрос.

api.getList().then((res) =>  {
      state.Forms = res.data 
      commit("createStructure");
  });

В мутации собственно меняю state. Есть getter на данное свойство.

Проблема в том, что когда в компоненте я обращаюсь к геттеру.

computed: {
    ...mapGetters(["actualForms"]),
  }

,

Сначала обрабатывается он ( пустой) а потом приходит ответ с сервера. Пробовал сделать и в created и в mounted. Результат один

Как сделать чтобы сначала дождаться инфомрации с бэка, а потом отрисовать это?

Answer 1

Не знаю как там у вас store структурирован. Но самый простой способ это добавить в него флаг того, был ли выполнен запрос к API или нет и вообще не грузить компонент с геттером пока там false.

Это даст вам:

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

БЛОГ НА HUSL

Как добиться асинхронности от getter?

Ответы (1 шт):