store.ts

import Vue from 'vue';
import Vuex from 'vuex';
import { Module, VuexModule, Mutation, Action } from 'vuex-module-decorators';

Vue.use(Vuex);

const debug = process.env.NODE_ENV !== 'production';

interface LoginCredentials {
    username: string;
    password: string;
}

@Module
class Authentication extends VuexModule {
    private authorizationHeader = '';

    @Mutation
    public setAuthorizationHeader(newHeader: string) {
        window.alert('setting: ' + newHeader);
        this.authorizationHeader = newHeader;
        window.alert('is now on: ' + this.authorizationHeader);
    }

    @Action
    public async setLoginCredentials(payload: LoginCredentials) {
        window.alert('user: ' + payload.username);
        window.alert('pass: ' + payload.password);

        const authHeader = window.btoa(payload.username + ':' + payload.password);
        this.context.commit('setAuthorizationHeader', 'Basic ' + authHeader);
    }

    get authHeader(): string {
        window.alert('called authHeader() -> ' + this.authorizationHeader);
        return this.authorizationHeader;
    }
}

export default new Vuex.Store({
    strict: debug,
    modules: {
        Authentication,
    },
});