salix-front/src/components/FetchData.vue

<script setup>
import { h, onMounted } from 'vue';
import axios from 'axios';

const $props = defineProps({
    autoLoad: {
        type: Boolean,
        default: false,
    },
    url: {
        type: String,
        default: '',
    },
    filter: {
        type: Object,
        default: null,
    },
    where: {
        type: Object,
        default: null,
    },
    sortBy: {
        type: String,
        default: '',
    },
    limit: {
        type: String,
        default: '',
    },
    params: {
        type: Object,
        default: null,
    },
});

const emit = defineEmits(['onFetch']);
defineExpose({ fetch });

onMounted(async () => {
    if ($props.autoLoad) {
        await fetch();
    }
});

async function fetch(fetchFilter = {}) {
    try {
        const filter = Object.assign(fetchFilter, $props.filter); // eslint-disable-line vue/no-dupe-keys
        if ($props.where) filter.where = $props.where;
        if ($props.sortBy) filter.order = $props.sortBy;
        if ($props.limit) filter.limit = $props.limit;

        const { data } = await axios.get($props.url, {
            params: { filter: JSON.stringify(filter), ...$props.params },
        });

        emit('onFetch', data);
    } catch (e) {
        //
    }
}

const render = () => {
    return h('div', []);
};
</script>
<template>
    <render />
</template>