flaschengeist-frontend/src/plugins/balance/pages/Add.vue

<template>
  <q-page padding>
    <q-card>
      <q-card-section class="row">
        <div class="col-4 row q-pa-sm">
          <q-btn
            class="col"
            color="green"
            label="2€"
            @click="changeBalance(-2)"
          />
        </div>
        <div class="col-4 row q-pa-sm">
          <q-btn
            class="col"
            color="green"
            label="1€"
            @click="changeBalance(-1)"
          />
        </div>
        <div class="col-4 row q-pa-sm">
          <q-btn
            class="col"
            color="green"
            label="0,50€"
            @click="changeBalance(-0.5)"
          />
        </div>
        <div class="col-4 row q-pa-sm">
          <q-btn
            class="col"
            color="green"
            label="0,40€"
            @click="changeBalance(-0.4)"
          />
        </div>
        <div class="col-4 row q-pa-sm">
          <q-btn
            class="col"
            color="green"
            label="0,20€"
            @click="changeBalance(-0.2)"
          />
        </div>
        <div class="col-4 row q-pa-sm">
          <q-btn
            class="col"
            color="green"
            label="0,10€"
            @click="changeBalance(-0.1)"
          />
        </div>
      </q-card-section>
      <q-card-section>
        <div class="text-h6">{{ balance.toFixed(2) }} €</div>
      </q-card-section>
      <q-card-actions>
        <q-btn label="test" @click="$store.dispatch('balance/getBalance')" />
      </q-card-actions>
    </q-card>
  </q-page>
</template>

<script lang="ts">
import { computed, defineComponent, onBeforeMount } from '@vue/composition-api';
import { BalanceInterface } from 'src/plugins/balance/store/balance';
import { Store } from 'vuex';

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

    const store: Store<{ balance: BalanceInterface }> = <
      Store<{ balance: BalanceInterface }>
    >root.$store;

    const balance = computed<number>(() => {
      return store.state.balance.balance;
    });

    function changeBalance(amount: number) {
      store
        .dispatch('balance/changeBalance', amount)
        .catch(err => console.log(err));
    }

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