Typescript Vuex Module

auth.ts

import axios, { AxiosRequestConfig } from "axios";

import router from "@/router"; //shortcut to src
import { Module } from "vuex";

const authModule: Module<any, any> = {
  state: {
    loggedIn: false,
    loginError: null,
    username: null
  },

  getters: {
    humanLoginError(state: any) {
      return state.loginError || "";
    }
  },

  mutations: {
    loggedIn(state: any, payload) {
      state.loggedIn = true;
      state.loginError = null;
      state.username = payload.username || "";

      router.push("/");
    },

    loggedOut(state: any) {
      state.loggedIn = false;
      router.push("/login");
    },

    loginError(state: any, payload) {
      state.loginError = payload;
    }
  },

  actions: {
    async login({ commit }, payload) {
      commit("changeAppLoadingState", true);

      var formData = new FormData();
      formData.append("username", payload.name);
      formData.append("password", payload.pwd);

      axios({
        method: "post",
        url: "/auth/login",
        data: formData
      })
        .then(response => {
          commit("loggedIn", { username: response.data.name });
          commit("changeAppLoadingState", false);
        })
        .catch(error => {
          commit("loginError", error.response.data || "GENERAL_ERROR");
          commit("changeAppLoadingState", false);
        });
    },

    async logout({ dispatch, commit }) {
      axios({
        method: "post",
        url: "/auth/logout"
      })
        .then(response => {
          commit("clearNavigationState");
          commit("loggedOut");
        })
        .catch(error => {
          commit("clearNavigationState");
          commit("loggedOut");
        });
    }
  }
};

export default authModule;

navigation.ts

import { Module } from "vuex";

import BreadCrumbItem from "@/classes/BreadcrumbItem";

const navigationModule: Module<any, any> = {
  state: {
    currentPosition: null,
    breadcrumb: []
  },

  getters: {},

  mutations: {
    addLevelToNavigation(state: any, item: BreadCrumbItem) {
      if (state.currentPosition) {
        state.breadcrumb.push(state.currentPosition);
      }
      state.currentPosition = item;
    },

    removeLevelFromNavigation(state: any) {
      state.currentPosition = state.breadcrumb.pop();
    },

    clearNavigationState(state: any) {
      state.currentPosition = null;
      state.breadcrumb = [];
    }
  },

  actions: {}
};

export default navigationModule;

store.ts

import Vue from "vue";
import Vuex from "vuex";

import storage from "vuejs-storage";

import auth from "./modules/auth";
import navigation from "./modules/navigation";

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    auth,
    navigation
  },
  state: {
    isAppLoading: false
  },
  mutations: {
    changeAppLoadingState(state: any, appLoadingState) {
      state.isAppLoading = appLoadingState;
    }
  },

  actions: {},

  plugins: [
    storage({
      namespace: "test_session",
      storage: window.sessionStorage,
      keys: [
        "auth.loggedIn",
        "navigation.breadcrumb",
        "navigation.currentPosition"
      ]
    }),
    storage({
      namespace: "test_local",
      keys: ["auth.username"]
    })
  ]
});

Putting any everywhere defeats the purpose of typescript

First 'any' in 'Module<any, any>' is the initial state of your module, and second 'any' is RootState of 'createStore'