ouatterrir-app/src/App.vue

<script>
import { RouterLink, RouterView } from 'vue-router'

import { mapState, mapActions } from 'pinia'
import { UserStore } from '@/stores/user'
import { ConcernementsStore } from '@/stores/concernements'

import StaticMenu from '@components/block/StaticMenu.vue'
import UserBlock from '@components/block/UserBlock.vue'

import MapConcernements from '@components/MapConcernements.vue'
import ConcernementMapItem from '@components/ConcernementMapItem.vue'

export default {
  created () {
    this.loadConcernements()
  },
  mounted () {
    console.log('APP onMounted')
    this.checkUser()      
  },
  computed: {
    ...mapState(UserStore,['isloggedin']),
    ...mapState(ConcernementsStore,['concernements']),
    ...mapState(ConcernementsStore,['concernementsByID'])
  },
  methods: {
    ...mapActions(ConcernementsStore,['loadConcernements']),
    ...mapActions(UserStore,['checkUser'])
  },
  components: {
    MapConcernements,
    ConcernementMapItem,
    StaticMenu,
    UserBlock
  }
}

</script>

<template>
  <header id="header">
    <div class="row top">
      <h1>
        <router-link :to="{ name: 'home' }">Où atterrir</router-link>  
      </h1>
      <StaticMenu/>
      <UserBlock/>
    </div>
  </header>

  <div id="main-content">
    <MapConcernements>
      <ConcernementMapItem
        v-for="(concernement,id) in concernementsByID"
        :key="id"
        :concernement="concernement"
        :opened="concernement.opened"
      />
    </MapConcernements>
    <div id="content">
      <RouterView />
    </div>
  </div>

</template>

<style lang="scss" scoped>
</style>