Can anyone tell me did I did it right?
pages/products.vue
<template>
<div v-if= "fetchDataState.isFetching" py-4 w-full flex justify-center >
<spinner />
</div>
<div v-else-if= "fetchDataState.isFailed" text-center py-4 >
Load failed
</div>
<product-list v-else :products= "products" />
</template>
<script setup lang= "ts" >
const { products , fetchDataState } = useProductsByCatalog ();
</script>
Enter fullscreen mode
Exit fullscreen mode
composables/useProductsByCatalog.ts
export function useProductsByCatalog ( catalogId : string ) {
const { products , setProducts } = useProducts ();
const { fetchDataState } = useFetchDataState ();
onMounted (() => {
fetchDataState . isFetching = true ;
setTimeout (() => {
fetchDataState . isSuccess = true ;
setProducts ( xxx )
}, 1000 );
});
return {
products ,
fetchDataState ,
};
};
Enter fullscreen mode
Exit fullscreen mode
composables/useFetchDataState.ts
enum AsyncReqState {
beforeReq ,
waitRes ,
success ,
failed ,
}
class FetchDataState {
reqState : AsyncReqState ;
constructor () {
this . reqState = AsyncReqState . beforeReq ;
this . isFetching = false ;
}
set isBeforeReq ( newVal : boolean ) {
if ( newVal ) {
this . reqState = AsyncReqState . beforeReq ;
}
}
get isBeforeReq () {
return this . reqState === AsyncReqState . beforeReq ;
}
set isFetching ( newVal : boolean ) {
if ( newVal ) {
this . reqState = AsyncReqState . waitRes ;
}
}
get isFetching () {
return this . reqState === AsyncReqState . waitRes ;
}
set isSuccess ( newVal : boolean ) {
if ( newVal ) {
this . reqState = AsyncReqState . success ;
}
}
get isSuccess () {
return this . reqState === AsyncReqState . success ;
}
set isFailed ( newVal : boolean ) {
if ( newVal ) {
this . reqState = AsyncReqState . failed ;
}
}
get isFailed () {
return this . reqState === AsyncReqState . failed ;
}
}
export function useFetchDataState () {
const fetchDataState = reactive < FetchDataState > ( new FetchDataState ());
return {
fetchDataState ,
};
}
Enter fullscreen mode
Exit fullscreen mode
Top comments (0)