flaschengeist-frontend/src/plugins/balance/store/balance.ts

import { Module, MutationTree, ActionTree, GetterTree } from 'vuex';
import { StateInterface } from 'src/store';
import { axios } from 'src/boot/axios';
import { AxiosResponse } from 'axios';

interface BalanceResponse {
  balance: number;
  credit: number;
  debit: number;
}

export interface BalanceInterface extends BalanceResponse {
  limit: number;
}

const state: BalanceInterface = {
  balance: 0,
  credit: 0,
  debit: 0,
  limit: 0
};

const mutations: MutationTree<BalanceInterface> = {
  setBalance(state, data: number) {
    state.balance = data;
  },
  setCredit(state, data: number) {
    state.credit = data;
  },
  setDebit(state, data: number) {
    state.debit = data;
  },
  setLimit(state, data: number) {
    state.limit = data;
  }
};

const actions: ActionTree<BalanceInterface, StateInterface> = {
  getBalance({ commit, rootState }) {
    axios
      .get(`/users/${rootState.user.user.userid}/balance`)
      .then(({ data }: AxiosResponse<BalanceResponse>) => {
        commit('setBalance', data.balance);
        commit('setCredit', data.credit);
        commit('setDebit', data.debit);
      })
      .catch(err => {
        console.warn(err);
      });
  },
  getLimit({ rootState }) {
    axios
      .get(`/users/${rootState.user.user.userid}/balance/limit`)
      .then(({ data }) => {
        console.log(data);
      })
      .catch(err => {
        console.warn(err);
      });
  },
  changeBalance({ rootState, dispatch }, amount: number) {
    axios
      .put(`/users/${rootState.user.user.userid}/balance`, <{ amount: number }>{
        amount: amount
      })
      .then(() => {
        dispatch('getBalance').catch(err => console.warn(err));
      })
      .catch(err => console.warn(err));
  }
};

const getters: GetterTree<BalanceInterface, StateInterface> = {};

const balance: Module<BalanceInterface, StateInterface> = {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
};

export default balance;