Добавление задержки после изменения состояния vuex

Question

Я пытаюсь добавить некоторую задержку к переходу из элемента, когда значение - v-if директива связывается с - изменяется с true на false. Я использую Vuex для поддержания состояния isLoading, чтобы оно использовалось в других компонентах.

Итак, у меня есть вызов API, который устанавливает this.$store.state.isLoading в значение true во время ожидания ответа и false, когда ответ получили. Но проблема в том, что ответ API почти мгновенный, а индикатор выполнения мигает только доли секунды.

<template>
  <div>
    <b-progress v-if="isLoading" :max="max">
      <b-progress-bar :value="count"></b-progress-bar>
    </b-progress>
  </div>
</template>

<script>
module.exports = {
    data() {
        return {
            count: 0,
            max: 100
        }
    },
    computed: {
        isLoading () {
            return this.$store.state.isLoading;
        }
    }
}
</script>

Правильно ли это, добавляя задержку после изменения состояния? Если да, то как правильно это сделать?

Answer 1

Вы должны добавить задержку сразу после вызова API, если у вас есть мутация с именем updateIsLoading для обновления состояния isLoading.

fetch(url)
  .then(res => res.json())
  .then(res => {
    // do something with your data
    setTimeout(() => this.$store.commit('updateIsLoading'), 1000)
  })
  .catch(...)

Если вам нужно установить задержку один раз и для все, одно решение - создать действие, а затем отправить действие после получения ответа от вызова API.

actions: {
  updateIsLoading({ commit }) {
    setTimeout(() => commit('updateIsLoading'), 1000)
  }
}

Если вы действительно хотите сделать это в своем компоненте, вы можете настроить наблюдателя и обновить локальную isLoading переменную после некоторой задержки:

export default {
    data() {
        return {
            count: 0,
            max: 100,
            isLoading: false
        }
    },
    computed: {
        loading () {
            return this.$store.state.isLoading;
        }
    },
    watch: {
      loading(newVal, oldVal) {
        setTimeout(() => this.isLoading = newVal, 1000)
      }
    }
}