BeispielComponent.vue

//Beispielcode

<template>
  <q-card style="width: 100%">
    <q-card-section>
      <szenario-vergleich-table :szenario-list="state.szenarios" />
      <div v-if="state.loading" class="row justify-center q-pt-lg">
        <q-spinner size="lg" color="primary" />
      </div>
    </q-card-section>
  </q-card>
  <footer-navigation />
</template>

<script setup lang="ts">
import { FooterNavigation } from 'X-design-system';
import { useI18n } from 'vue-i18n';
import SzenarioVergleichTable from '@/feature/szenariovergleich/components/SzenarioVergleichTable.vue';
import { reactive } from 'vue';
import { useQuasarNotify } from '@/shared/composables/useQuasarNotify';
import { useSzenarioService } from '@/shared/composables/useSzenarioService';
import { Dto_1, Dto_2 } from '@gs/openapi';

const { t } = useI18n();
const quasarNotify = useQuasarNotify();
const { getAllSzenarios } = useSzenarioService();

const props = defineProps<{
  dto_1: Dto_1;
}>();
const state = reactive({
  szenarios: [] as Dto_2[],
  loading: true,
});

_loadSzenariosToList();

async function _loadSzenariosToList() {
  try {
    state.szenarios = await getAllSzenarios(props.dto_1.blz);
    state.loading = false;
  } catch (e) {
    quasarNotify.getErrorNotification(t('error.loading_szenarios'));
  }
}
</script>

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

<i18n>
{
  "de": {
    "scenario_comparison": "Szenariovergleich"
  }
}
</i18n>

BeispielComponentRefactored1.vue

<template>
  <q-card :style="{ width: '100%' }" class="full-width">
    <q-card-section>
      <szenario-vergleich-table :szenario-list="state.szenarios" />
      <div v-if="state.loading" class="row justify-center q-pt-lg">
        <q-spinner size="lg" color="primary" />
      </div>
    </q-card-section>
  </q-card>
  <footer-navigation />
</template>

<script setup lang="ts">
import { FooterNavigation } from "X-design-system";
import { useI18n } from "vue-i18n";
import SzenarioVergleichTable from "@/feature/szenariovergleich/components/SzenarioVergleichTable.vue";
import { reactive, watchEffect, ComputedRef, computed } from "vue";
import { useQuasarNotify } from "@/shared/composables/useQuasarNotify";
import { useSzenarioService } from "@/shared/composables/useSzenarioService";
import { Dto_1, Dto_2 } from "@gs/openapi";

// in useAllSzenarios.ts
const useAllSzenarios = (blz: ComputedRef<number>) => {
  const { t } = useI18n();
  const quasarNotify = useQuasarNotify();
  const { getAllSzenarios } = useSzenarioService();

  const state = reactive({
    szenarios: [] as Dto_2[],
    loading: true,
  });

  const loadSzenarioList = async () => {
    try {
      state.loading = true;
      state.szenarios = await getAllSzenarios(blz.value);
    } catch (e) {
      quasarNotify.getErrorNotification(t("error.loading_szenarios"));
    } finally {
      state.loading = false;
    }
  };

  watchEffect(loadSzenarioList);

  return state;
};

const props = defineProps<{
  dto_1: Dto_1;
}>();
const state = useAllSzenarios(computed(props.dto_1.blz));
</script>

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

<i18n>
{
  "de": {
    "scenario_comparison": "Szenariovergleich"
  }
}
</i18n>

BeispielComponentRefactored2.vue

<template>
  <q-card :style="{ width: '100%' }" class="full-width">
    <q-card-section>
      <szenario-vergleich-table :szenario-list="state.szenarios" />
      <div v-if="state.loading" class="row justify-center q-pt-lg">
        <q-spinner size="lg" color="primary" />
      </div>
    </q-card-section>
  </q-card>
  <footer-navigation />
</template>

<script setup lang="ts">
import { FooterNavigation } from "X-design-system";
import { useI18n } from "vue-i18n";
import SzenarioVergleichTable from "@/feature/szenariovergleich/components/SzenarioVergleichTable.vue";
import { reactive, watchEffect, ComputedRef, computed } from "vue";
import { useQuasarNotify } from "@/shared/composables/useQuasarNotify";
import { useSzenarioService } from "@/shared/composables/useSzenarioService";
import { Dto_1, Dto_2 } from "@gs/openapi";

// in useData.ts
const useData = <Data>(fetchData: () => Promise<Data>, errorId: string) => {
  const { t } = useI18n();
  const quasarNotify = useQuasarNotify();

  const state = reactive({
    data: null as null | Data,
    loading: true,
  });

  const load = async () => {
    try {
      state.loading = true;
      state.data = (await fetchData()) as UnwrapRef<Data>;
    } catch (e) {
      quasarNotify.getErrorNotification(t(errorId));
    } finally {
      state.loading = false;
    }
  };

  watchEffect(load);

  return state;
};

const { getAllSzenarios } = useSzenarioService();
const props = defineProps<{
  dto_1: Dto_1;
}>();

const state = useData(async () => {
  return getAllSzenarios(props.dto_1.blz);
}, "error.loading_szenarios");

</script>

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

<i18n>
{
  "de": {
    "scenario_comparison": "Szenariovergleich"
  }
}
</i18n>