Добавление индикаторов загрузки Vuejs (обещания)

Добавить индикаторы загрузки состояния в Vuejs

Читайте полный пост здесь

Попытка выяснить хороший способ управлять загрузкой состояния для Промация Зарегистрироваться Форма и другие асинхронные страницы и компоненты. Я наткнулся на аккуратный способ управлять асинхронным состоянием загрузки.

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

Я создал аккуратный модуль, который может помочь с управлением асинхронным состоянием загрузки (обещания) в приложении Vuejs

import { ref, computed } from '@vue/composition-api' // using vue 3 syntax

export default function () {
    let loading = ref(false) //initial value of false

    return computed({
        get () {
            return loading.value // return the loading value
        },
        async set (value) {
            loading.value = true //update loading ref value to be true
            await value //wait for promise completion
            loading.value = false //update loading ref back to false
        }
    })
}

То, как он используется:

Click

import promiser from '@/utils/promiser' //the helper we've just created 

export default {
    setup(){
        return {
            promise: promiser() //create and expose an instance of the computed variable
        }
    }
}

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

Когда <кнопка> нажал, он триггеры Установить () Функция внутри вычисленной переменной, которая обновляет состояние загрузки.

После нажатия

Оригинал: “https://dev.to/promatia/managing-vuejs-loading-state-promises-2he4”