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 { computed, defineComponent, onBeforeMount } from 'vue';
import {
  BalanceInterface,
  StateInterfaceBalance,
  UserBalance,
} from 'src/plugins/balance/store/balance';
import { mapGetters, Store, useStore } from 'vuex';
import { UserStateInterface } from 'src/plugins/user/store/user';
import { StateInterface } from 'src/store';

export default defineComponent({
  name: 'BalanceWidget',
  setup() {
    onBeforeMount(() => {
      store.dispatch('balance/getBalance').catch((err) => {
        console.warn(err);
      });
    });

    //const store = <Store<StateInterfaceBalance>>root.$store;
    const store = useStore<Store<StateInterface>>();
    const balanceGetters = mapGetters('balance', ['balances']);
    const userGetters = mapGetters('user', ['currentUser']);

    const balance = computed(
      () =>
        (<Map<string, UserBalance>>balanceGetters.balances()).get(
          (<FG.User>userGetters.currentUser()).userid
        )?.balance || NaN
    );

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