vuejs modular state management using vuex-local-storage-localforage(indexdb), vuex-persist

vuex_index.ts

import Vue from "vue";
import Vuex from "vuex";
import { ChatState } from "@/types/chat";
import appConfig, { AppConfig } from "./modules/appConfig";
import appLoading, { AppLoading } from "./modules/loading";
import appOverlays, { AppOverlay } from "./modules/overlays";
import apiErrorNotificationList, {
  StoreAxiosError
} from "./modules/axiosError";
import authModule, { IAuthModule } from "./modules/authModule";
import xmppModule, { IXmppModule } from "./modules/xmppModule";
import chatState from "./modules/chatState";
import VuexPersistence, { AsyncStorage } from "vuex-persist";
import localForage from "localforage";
// import securityOptions from "@/store/securityOptions";

export interface State {
  appLoading: AppLoading;
  appOverlays: AppOverlay;
  apiErrorNotificationList: StoreAxiosError | any;
  xmppModule: IXmppModule;
  chatState: ChatState;
  appConfig: AppConfig;
  authModule: IAuthModule;
}
export interface StateAppConfig {
  appConfig: AppConfig;
  authModule: IAuthModule;
}
// const ls = new SecureLS(securityOptions);
Vue.use(Vuex);

const vuexLocalStorage = new VuexPersistence<StateAppConfig>({
  key: "vuex-app-config",
  supportCircular: true,
  storage: window.localStorage,
  reducer: state => ({
    appConfig: state.appConfig,
    authModule: state.authModule
  })
});
const vuexLocalForage = new VuexPersistence<State>({
  key: "vuex-chat-state",
  supportCircular: true,
  storage: localForage as AsyncStorage,
  asyncStorage: true,
  reducer: state => ({
    xmppModule: state.xmppModule,
    chatState: state.chatState
  })
});

export default new Vuex.Store<State>({
  modules: {
    appConfig,
    appLoading,
    appOverlays,
    apiErrorNotificationList: apiErrorNotificationList as any,
    authModule,
    xmppModule,
    chatState
  },
  plugins: [vuexLocalForage.plugin, vuexLocalStorage.plugin]
});