<template>
    <main>
        <p>{{ globalData.magasin_explication }}</p>
        <Projects :contents="magasin" />
    </main>
</template>

<script>
import Projects from '@/components/Projects.vue';

export default {
    setup() {
        const magasin = ref([]);

        const { data: itemsData } = useFetch('/api/items/magasin', { server: true });

        onBeforeMount(async () => {
            if (itemsData.value) {
                magasin.value = itemsData.value.data;
            }
        });

        let globalData = useState('globalData');
        globalData = globalData.value.data;

        return {
            globalData,
            magasin
        };
    },
    components: {
        Projects
    }
};
</script>