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 = { 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 = { getBalance({ commit, rootState }) { axios /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions */ .get(`/users/${rootState.user.currentUser?.userid}/balance`) .then(({ data }: AxiosResponse) => { commit('setBalance', data.balance); commit('setCredit', data.credit); commit('setDebit', data.debit); }) .catch(err => { console.warn(err); }); }, getLimit({ rootState }) { axios /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions */ .get(`/users/${rootState.user.currentUser?.userid}/balance/limit`) .then(({ data }) => { console.log(data); }) .catch(err => { console.warn(err); }); }, changeBalance({ rootState, dispatch }, amount: number) { axios /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions */ .put(`/users/${rootState.user.currentUser?.userid}/balance`, < { amount: number } >{ amount: amount }) .then(() => { dispatch('getBalance').catch(err => console.warn(err)); }) .catch(err => console.warn(err)); } }; const getters: GetterTree = {}; const balance: Module = { namespaced: true, state, mutations, actions, getters }; export default balance;