flaschengeist-frontend/src/plugins/balance/components/Widget.vue

<template>
  <q-card style="text-align: center">
    <q-card-section>
      <div class="text-h6">Gerücht: {{ balance.toFixed(2) }} €</div>
    </q-card-section>
  </q-card>
</template>

<script lang="ts">
import { useMainStore } from 'src/store';
import { useBalanceStore } from '../store';
import { computed, defineComponent, onBeforeMount } from 'vue';

export default defineComponent({
  name: 'BalanceWidget',
  setup() {
    const store = useBalanceStore();

    onBeforeMount(() => {
      const mainStore = useMainStore();
      void store.getBalance(mainStore.currentUser);
    });

    const balance = computed(() => store.balance?.balance || NaN);

    return { balance };
  },
});
</script>