@lgarciawebdev/use-fetch-state/dist/index.js

A Nuxt composable for managing fetch state using useFetch with auto-import and type support.

import { ref } from 'vue';
import { useFetch } from '#imports';
export function useFetchState(url, params) {
    const data = ref(null);
    const error = ref(null);
    const status = ref('idle');
    async function actionFn(event) {
        if (event?.preventDefault)
            event.preventDefault();
        status.value = 'pending';
        error.value = null;
        try {
            const { data: fetchedData, error: fetchError } = await useFetch(url, {
                ...params
            });
            if (fetchError.value) {
                status.value = 'error';
                error.value = fetchError.value;
            }
            else {
                status.value = 'success';
                data.value = fetchedData.value;
            }
        }
        catch (err) {
            status.value = 'error';
            error.value = err;
        }
    }
    function clear() {
        data.value = null;
        error.value = null;
        status.value = 'idle';
    }
    async function refresh() {
        return actionFn();
    }
    return {
        data,
        error,
        status,
        actionFn,
        refresh,
        clear
    };
}