Есть такой код
<template>
<div v-if="$store.getters.list">
<List>появится после выполнения асинхронного запроса</List>
</div>
<div v-else>
<Preloader v-if="$store.state.loader">индикатор загрузки</Preloader>
<div v-if="!$store.state.loader">Не удалось загрузить данные с сервера</div>
</div>
</template>
- здесь мы получаем список каких-то айтемов, которые придут после выполнения запроса на сервер. То есть, открывается страница и сразу происходит запрос на сервер, после чего данные записываются в list геттеров vuex.
Иначе показывается другой блок, в котором есть прелоадер и статичная информация в случае если по какой-то причине запрос на сервер не сработал
<Preloader v-if="$store.state.loader">индикатор загрузки</Preloader>
- это отдельный компонент с индикатором загрузки, который показывается в начале запроса и скрывается после завершения запроса. То есть в state vuex есть свойство loader, которое меняется на true/false в зависимости от того завершился запрос на сервер или нет
<div v-if="!$store.state.loader">Не удалось загрузить данные с сервера</div>
- этот блок как раз и содержит в себе ту информацию, которая должна быть показана если в запросе ничего не пришло/запрос не был выполнен.
Это сейчас работает, но вопрос в том, такая реализация- это нормально или есть способ сделать как-то более лаконично чем писать такте конструкции с v-else
<div v-else>
<Preloader v-if="$store.state.loader">индикатор загрузки</Preloader>
<div v-if="!$store.state.loader">Не удалось загрузить данные с сервера</div>
</div>
