Как сделать прелоадер в Vue?

Question

Ваник Хачатрян @VaniXac

17 лет

Vue.js

Как сделать прелоадер в Vue?

Как отловить момент когда отправлены все ajax запросы и получены ответы, что бы менять значение showPreloader с false на true и обратно?

Использую axios. Делаю SPA, и при переходе по страницам, значение showPreloader должно менять на true, пока не получу все ответы с отправленных запросов в API. Так должно быть единоразово , при created.

Вопрос задан более трёх лет назад
5385 просмотров

1 комментарий

Подписаться 3 Простой 1 комментарий

Денис Конышев @Denkon_FL
Не знаю правильно или нет реализовал у себя прелоадер т.к недавно vue начал изучать, но пошел по простому пути.
Сделал через условную логику:

<div class="portfolio" v-if="preloader">Тут отрисовка</div> <div class="portfolio" v-else="preloader">Грузим</div>

data () { return { title: 'Home page', preloader: false }

И в mounted вставил true

mounted() { axios .get(url) .then( response => ( this.portfolio = response.data, // получили данные this.preloader = true ) )

а уж в else можно любой html + css прелоадер вставить
Написано более трёх лет назад

Не знаю правильно или нет реализовал у себя прелоадер т.к недавно vue начал изучать, но пошел по простому пути.
Сделал через условную логику:

<div class="portfolio" v-if="preloader">Тут отрисовка</div> <div class="portfolio" v-else="preloader">Грузим</div>

data () { return { title: 'Home page', preloader: false }

И в mounted вставил true

mounted() { axios .get(url) .then( response => ( this.portfolio = response.data, // получили данные this.preloader = true ) )

а уж в else можно любой html + css прелоадер вставить

Answer 1 · 2018-03-29 20:58:25

Если операций много и они асинхронны, можно воспользоваться паттерном Locking Pool:

const store = {
  state: {
    lockingPool: 0
  },
  getters: {
    isUiLocked: state => state.lockingPool > 0
  },
  mutations: {
    lockUi: state => state.lockingPool++,
    unlockUi: state => state.lockingPool--
  },
  actions: {
    async someAction ({ commit }) {
      commit('lockUi')
      const { data } = await http.get('/some-url')
      commit('unlockUi')
    }
  }
}

Как сделать прелоадер в Vue?

Войдите на сайт