flaschengeist-frontend/src/plugins/user/pages/Settings.vue

<template>
  <div>
    <q-page
      padding
      class="fit row justify-center content-center items-center q-gutter-sm"
    >
      <div
        class="fit row justify-center content-center items-center q-gutter-sm"
      >
        <circular-progress v-if="sessionsLoading" />
        <div class="col-12 text-left text-h6">
          Allgemeine Einstellungen:
        </div>
        <Main />
        <div class="col-12 text-left text-h6">
          Aktive Sessions:
        </div>
        <sessions
          v-for="(session, index) in sessions"
          :key="'session' + index"
          :session="session"
        />
      </div>
      <div class="row">
        <q-btn
          label="show sessions"
          @click="showRootGetters"
        />
      </div>
    </q-page>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onBeforeMount } from '@vue/composition-api';
import CircularProgress from 'components/loading/CircularProgress.vue';
import Sessions from '../components/settings/Sessions.vue';
import Main from '../components/settings/Main.vue';
export default defineComponent({
  // name: 'PageName'
  components: { CircularProgress, Sessions, Main },
  setup(_, { root }) {
    onBeforeMount(() => {
      root.$store.dispatch('sessions/getSessions');
    });
    const sessions = computed(() => root.$store.getters['sessions/sessions']);

    function showRootGetters() {
      //ctx.root.$store.dispatch('sessions/getSessions');
      console.log(sessions.value);
    }

    const sessionsLoading = computed(() => {
      return root.$store.getters['sessions/loading'];
    });

    return {
      showRootGetters,
      sessionsLoading,
      sessions
    };
  }
});
</script>