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

Question

[Ваник Хачатрян]

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

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

Comments

[Денис Конышев]

Не знаю правильно или нет реализовал у себя прелоадер т.к недавно 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

[askhat]

Если операций много и они асинхронны, можно воспользоваться паттерном 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')
    }
  }
}

Comments

[Ваник Хачатрян]

А без Vuex можно?

[Алексей Ярков]

Ваник Хачатрян, конечно

[Ваник Хачатрян]

Алексей Ярков, но как

[Алексей Ярков]

Да масса вариантов на самом деле. Ваник Хачатрян, вам все варианты написать? Может вы все-таки о своем проекте больше информации дадите? Демку там запилите например.
Откуда же нам знать что вы используете в проекте. Если Vuex вам не нужен, то можно в $root писать, или event bus юзать.

[Ваник Хачатрян]

Алексей Ярков, через рут было бы актуальней реализовать. Опишите, в чем суть, самреализую?

[askhat]

Без Vuex

<template>
  <div :class="{ locked: isUiLocked }">
    <some-component @lock="lockUi" @unlock="unlockUi"/>
  </div>
</template>

<script>
export default {
  data () {
    return {
      lockingPool: 0
    }
  },
  computed: {
    isUiLocked () {
      return this.lockingPool > 0
    }
  },
  methods: {
    lockUi () {
      this.lockingPool++
    },
    unlockUi () {
      this.lockingPool--
    }
  }
}
</script>

[Ваник Хачатрян]

Askhat Bikmetov, @lock - это окуда

[askhat]

Ваник Хачатрян, из дочернего компонента

export default {
  methods: {
    clickHandler (event) {
      this.$emit('click', event)
    },
    lockUi () {
      this.$emit('lock')
    }
  }
}

[askhat]

Дейкстра придумал семафор в 1965, а я где-то в 2016 https://ru.wikipedia.org/wiki/Семафор_(программиро...

Answer 2

[lavezzi1]

methods: {
  async fetchData() {
    this.showPreloader = true;
    const promises = this.items.map(item => axios.get('/api/items/${item.id}/'));
    const results = await Promise.all(promises);
    this.showPreloader = false;
  }
}