リモートデータとUIの状態遷移パターン
https://scrapbox.io/files/6413d0f7ad565a001b452abe.png
code:ts
const STATES = {
IDLE: 'IDLE',
VALIDATING: 'VALIDATING',
PENDING: 'PENDING',
SUCCESS: 'SUCCESS',
ERROR: 'ERROR',
STALE_IF_ERROR: 'STALE_IF_ERROR',
}
const state = ref('idle')
watchEffect(() => {
if (data.value && isValidating.value) {
state.value = STATES.VALIDATING
return
}
if (data.value && error.value) {
state.value = STATES.STALE_IF_ERROR
return
}
if (data.value === undefined && !error.value) {
state.value = STATES.PENDING
return
}
if (data.value && !error.value) {
state.value = STATES.SUCCESS
return
}
if (data.value === undefined && error) {
state.value = STATES.ERROR
return
}
})
UIと組み合わせる