#31 Using Vuex Getters To Populate The Account Securities And Deposits

Tuesday, January 7, 2020

In this article we will create several different vuex getters that we can use when we access an account that will automatically populate the deposits and securities that are associated with the account.

Christopher R. Jamell

Watch In YouTube

Parts

Code Snippets

store-constants.ts (1:13)

...
export const GETTER_ACCOUNT_DEPOSIT = "GETTER_ACCOUNT_DEPOSIT";
export const GETTER_ACCOUNT_DEPOSITS = "GETTER_ACCOUNT_DEPOSITS";
export const GETTER_ACCOUNT_SECURITIES = "GETTER_ACCOUNT_SECURITIES";
export const GETTER_ACCOUNT_SECURITY = "GETTER_ACCOUNT_SECURITY";
...

src ⟩ store ⟩ store-constants.ts

account-types.ts (1:42)

import {
    ...,
    GETTER_ACCOUNT_DEPOSIT,
    GETTER_ACCOUNT_DEPOSITS,
    GETTER_ACCOUNT_SECURITIES,
    GETTER_ACCOUNT_SECURITY,
    ...
} from "@/store/store-constants";

export type GetterAccountDeposit = (id: number) => AccountDepositModel;
export type GetterAccountDeposits = (accountId: number) => AccountDepositModel[];
export type GetterAccountSecurity = (id: number) => AccountSecurityModel;
export type GetterAccountSecurities = (accountId: number) => AccountSecurityModel[];
...
export interface IAccountGetters {
    ...
    [GETTER_ACCOUNT_DEPOSIT]: GetterAccountDeposit;
    [GETTER_ACCOUNT_DEPOSITS]: GetterAccountDeposits;
    [GETTER_ACCOUNT_SECURITIES]: GetterAccountSecurities;
    [GETTER_ACCOUNT_SECURITY]: GetterAccountSecurity;
    ...
}

src ⟩ store ⟩ account-types.ts

store-types.ts (3:41)

...
import { IAccountGetters, ... } from "@/store/account-types";
...
export interface IStoreGetters extends IAccountGetters, ISecurityGetters {}
...

src ⟩ store ⟩ store-types.ts

account-module.ts (4:13)

...
import {
    ...,
    GETTER_ACCOUNT_DEPOSIT,
    GETTER_ACCOUNT_DEPOSITS,
    GETTER_ACCOUNT_SECURITIES,
    GETTER_ACCOUNT_SECURITY,
    ...,
    GETTER_SECURITY,
    ...,
} from "@/store/store-constants";
...
import { IStoreGetters, ... } from "@/store/store-types";
...
export const accountGetters: StoreGetterTree = {
    ...,
    [GETTER_ACCOUNT_DEPOSIT]: (storeState, getters: IAccountGetters) => {
        return (id: number) => {
            const deposit = findById(storeState[STATE_ACCOUNTS_DEPOSITS], id)!;

            storeActionValidator
                .begin()
                .while(StoreActions.Getting)
                .throwIf(deposit)
                .isUndefined(undefinedMessage("deposit", id, storeState[STATE_ACCOUNTS_DEPOSITS].index));

            deposit.account = getters[GETTER_ACCOUNT](deposit.accountId);

            return deposit;
        };
    },
    [GETTER_ACCOUNT_DEPOSITS]: (storeState) => {
        return (accountId: number) => {
            return storeState[STATE_ACCOUNTS_DEPOSITS].items.filter((x) => x.accountId === accountId);
        };
    },
    [GETTER_ACCOUNT_SECURITIES]: (storeState, getters: IStoreGetters) => {
        return (accountId: number) => {
            const accountSecurities = storeState[STATE_ACCOUNTS_SECURITIES].items.filter(
                (x) => x.accountId === accountId,
            );

            accountSecurities.forEach((x) => {
                x.security = getters[GETTER_SECURITY](x.securityId);
            });

            return accountSecurities;
        };
    },
    [GETTER_ACCOUNT_SECURITY]: (storeState, getters: IStoreGetters) => {
        return (id: number) => {
            const accountSecurity = findById(storeState[STATE_ACCOUNTS_SECURITIES], id)!;

            storeActionValidator
                .begin()
                .while(StoreActions.Getting)
                .throwIf(accountSecurity)
                .isUndefined(undefinedMessage("accountSecurity", id, storeState[STATE_ACCOUNTS_SECURITIES].index));

            accountSecurity.account = getters[GETTER_ACCOUNT](accountSecurity.accountId);
            accountSecurity.security = getters[GETTER_SECURITY](accountSecurity.securityId);

            return accountSecurity;
        };
    },
    ...
};

src ⟩ store ⟩ account-module.ts

index.ts (13:07)

export * from "@/store/account-deposit-model";
...
export * from "@/store/account-security-model";
...

src ⟩ store ⟩ index.ts

account-model.ts (13:45)

import { AccountDepositModel, AccountSecurityModel } from "@/store";
...
export class AccountModel {
    private _deposits: AccountDepositModel[] = [];
    ...
    private _securities: AccountSecurityModel[] = [];
    ...
    public get deposits() {
        return this._deposits;
    }
    public set deposits(deposits: AccountDepositModel[]) {
        this._deposits = deposits;
    }
    ...
    public get securities() {
        return this._securities;
    }
    public set securities(securities: AccountSecurityModel[]) {
        this._securities = securities;
    }
    ...
}

src ⟩ store ⟩ account-model.ts

account-module.ts (15:37)

...
export const accountGetters: StoreGetterTree = {
    [GETTER_ACCOUNT]: (state, getters: IAccountGetters) => {
        return (id: number) => {
            ...
            account.deposits = getters[GETTER_ACCOUNT_DEPOSITS](account.id);
            account.securities = getters[GETTER_ACCOUNT_SECURITIES](account.id);
            ...
        };
    },
    ...
}
...

src ⟩ store ⟩ account-module.ts

AccountsDetails.vue (16:40)

<script lang="ts">
...
export default class AccountsDetails extends Vue {
    ...
    private load() {
        ...
        console.log(account);
    }
    ...
}
</script>

src ⟩ views ⟩ AccountsDetails.vue

Exciton Interactive LLC