<template>
  <div>
    <q-page padding class="fit row justify-center content-center items-center">
      <div class="text-h5 row">
        Deine Sessions:
      </div>
      <!--<div class="fit row justify-center content-center items-center">
        <q-card
          class="col-4"
          height=""
          v-for="(session, index) in sessions"
          :key="'session' + index"
        >
          <q-card-section>
            {{ session }}
          </q-card-section>
        </q-card>
      </div> -->
      <div class="row">
        <q-btn label="show sessions" @click="showRootGetters" />
      </div>
    </q-page>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, reactive, ref } from '@vue/composition-api';
import { mainLink } from '../plugin';
export default defineComponent({
  // name: 'PageName'
  setup(_, ctx) {
    const sessions = computed(
      () => ctx.root.$store.getters['sessions/sessions']
    );
    function showRootGetters() {
      //ctx.root.$store.dispatch('sessions/getSessions');
      console.log(sessions.value);
    }
    return { showRootGetters, sessions };
  }
});
</script>
