app_vue2/pages/organization.vue

<!-- Page de détails de l'organization courante -->

<template>
  <LayoutContainer>
    <!-- Définit le contenu des trois slots du header de la page -->
    <LayoutBannerTop>
      <template #block1>
        {{ entry.name }}
      </template>
      <template #block2>
        N°Siret : {{ entry.siretNumber }}
      </template>
      <template #block3>
        {{ entry.description }}
      </template>
    </LayoutBannerTop>

    <!-- Rend le contenu de la page -->
    <NuxtChild />
  </LayoutContainer>
</template>

<script lang="ts">
import { computed, defineComponent, useContext, ComputedRef } from '@nuxtjs/composition-api'
import { Item, Query } from '@vuex-orm/core'
import { QUERY_TYPE } from '~/types/enums'
import { Organization } from '~/models/Organization/Organization'
import { queryHelper } from '~/services/store/query'
import { repositoryHelper } from '~/services/store/repository'

export default defineComponent({
  name: 'Organization',
  setup () {
    const { store } = useContext()

    const repository = repositoryHelper.getRepository(Organization)
    const query: ComputedRef<Query> = computed(() => repository.query())
    const entry: ComputedRef<Item> = computed(() => {
      return queryHelper.getItem(query.value, store.state.profile.organization.id)
    })

    return {
      entry
    }
  },
  async asyncData ({ store, $dataProvider }) {
    await $dataProvider.invoke({
      type: QUERY_TYPE.MODEL,
      model: Organization,
      id: store.state.profile.organization.id
    })
  }
})

</script>