VueJS 로딩 상태 표시기 추가(약속)

VueJS에 로딩 상태 표시기 추가

여기에서 전체 게시물 읽기

Promatia's sign up form 및 기타 비동기 페이지 및 구성 요소에 대한 로드 상태를 관리하는 좋은 방법을 찾는 동안. 비동기 로딩 상태를 관리하는 깔끔한 방법을 우연히 발견했습니다.

웹 앱은 작업이 진행 중임을 사용자에게 알리기 위해 로딩 상태(로딩 스피너와 같은 것)가 필요한 경우가 많습니다. 이러한 작업은 종종 시간이 걸리므로 사용자에게 로드 중임을 알리는 것이 가장 좋습니다. 그러면 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
        }
    })
}

사용 방법:

<button @click="promise = asyncFunction()">Click<button/>
<overlayLoader v-if="promise"/>

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
        }
    }
}

<overlayLoader/>는 양식 상단에 동기화 로더 애니메이션을 표시하는 구성 요소로, 클릭을 캡처하고 추가 작업을 방지합니다.
<button>를 클릭하면 계산된 변수 내에서 로드 상태를 업데이트하는 set() 함수가 트리거됩니다.


클릭 후