moving from Nuxt2 useFetch to Nuxt3 useAsyncData - how would you refactor this example?
Hello, as a title says, how would you refactor this example to keep SSR working exactly 1:1?
Nuxt 2
Nuxt 2
Similar Threads
Was this page helpful?
const homePage = ref<HomePage | null>(null)
const homePageLoaded = ref<boolean>(false)
useFetch(async () => {
homePage.value = await loadHomePage()
homePageLoaded.value = true
})
J
useState
WJW
BWJ
Mconst { data, status } = await useFetch()PENDING?MMM
datastatusconst homePageLoaded = ref(false);
const homePage = ref(1);
async function loaddata(){
const{ data: thedata } = useAsyncData( async () => {
return await loadHomePage();
});
homePage.value=thedata;
homePageLoaded.value = true;
}
await loaddata();BJBwatch(() => watachablevalue, (newVal,oldVal) => {
//use variable or do something when variable changes.
}); WJ
MM
JMtransform
JMJMMrefresh which comes from the useAsyncData and return the whole composable "response object" insteadJexecute and refresh the same functionallity?M const homePageLoaded = ref<boolean>(false)
const { data: homePage } = useAsyncData(async () => {
homePage.value = await loadHomePage()
homePageLoaded.value = true
return homePage
}) const { data: homePage, pending: homePageLoaded } = useAsyncData(async () => {
return await loadHomePage()
})const { data, status } = await useFetch()PENDINGconst homePageLoaded = ref(false);
const homePage = ref(1);
async function loaddata(){
const{ data: thedata } = useAsyncData( async () => {
return await loadHomePage();
});
homePage.value=thedata;
homePageLoaded.value = true;
}
await loaddata();watch(() => watachablevalue, (newVal,oldVal) => {
//use variable or do something when variable changes.
});refreshrefreshexecuteconst { data, pending, error, refresh } = await useFetch('/api/auth/login', {
onRequest({ request, options }) {
// Set the request headers
options.headers = options.headers || {}
options.headers.authorization = '...'
},
onRequestError({ request, options, error }) {
// Handle the request errors
},
onResponse({ request, response, options }) {
// Process the response data
localStorage.setItem('token', response._data.token)
},
onResponseError({ request, response, options }) {
// Handle the response errors
}
})export const useHomePage = async () => {
const onSuccess = new SimpleEventDispatcher()
const onError = new SimpleEventDispatcher()
const {data, execute} = useAsyncData(async () => {
try {
const response = await doSomething()
onSuccess.dispatch(response)
return response
} catch (e) {
onError.dispatch(e)
}
}, {immediate: false})
await execute()
return {
onSuccess,
onError,
data,
execute
}
}