adrema/resources/js/composables/useApiIndex.js

import {ref, inject, onBeforeUnmount} from 'vue';
import {router} from '@inertiajs/vue3';
import useQueueEvents from './useQueueEvents.js';

export function useApiIndex(url, siteName) {
    const axios = inject('axios');
    const {startListener, stopListener} = useQueueEvents(siteName, () => reload());
    const single = ref(null);
    const inner = {
        data: ref([]),
        meta: ref({}),
    };

    async function reload(resetPage = true) {
        var params = {
            page: resetPage ? 1 : inner.meta.value.current_page,
        };

        var response = (await axios.get(url, {params})).data;
        inner.data.value = response.data;
        inner.meta.value = response.meta;
    }

    async function reloadPage(page) {
        inner.meta.value.current_page = page;
        await reload(false);
    }

    function create() {
        single.value = JSON.parse(JSON.stringify(inner.meta.value.default));
    }

    function edit(model) {
        single.value = JSON.parse(JSON.stringify(model));
    }

    async function submit() {
        single.value.id ? await axios.patch(single.value.links.update, single.value) : await axios.post(inner.meta.value.links.store, single.value);
        await reload();
        single.value = null;
    }

    async function remove(model) {
        await axios.delete(model.links.destroy);
        await reload();
    }

    function can(permission) {
        return inner.meta.value.can[permission];
    }

    function requestCallback(successMessage, failureMessage) {
        return {
            onSuccess: () => {
                this.$success(successMessage);
                reload(false);
            },
            onFailure: () => {
                this.$error(failureMessage);
                reload(false);
            },
            preserveState: true,
        };
    }

    function cancel() {
        single.value = null;
    }

    startListener();
    onBeforeUnmount(() => stopListener());

    return {
        data: inner.data,
        meta: inner.meta,
        single,
        create,
        edit,
        reload,
        reloadPage,
        can,
        requestCallback,
        router,
        submit,
        remove,
        cancel,
        axios,
    };
}