How to use the vuex-class.State function in vuex-class

components: {
      SidebarDatabases,
      SidebarTables,
    },
  })
  export default class Sidebar extends Vue {
    @Getter private currentDb!: string;
    @Getter private currentTable!: string;
    @Getter private filteredTables!: string[];
    @Getter private filterText!: string;
    @Action private getCurrentDb: any;
    @Action private getDbTables: any;
    @Action private getCurrentTable: any;
    @Mutation private filterTextChange: any;
    @Mutation private initialState: any;
    @State(namespace) private database!: RootState;
    @Action('removeDbFromStorage', { namespace }) private removeDbFromStorage: any;
    @Action('getDbList', { namespace }) private getDbList: any;
    @Mutation('toggleCreateModal', { namespace: 'table' }) private toggleCreateModal: any;
    @Mutation('toggleDeleteModal', { namespace: 'table' }) private toggleDeleteModal: any;
    private created() {
      this.getDbList();
    }
  }

@Component({
    components: {
      ConnectDatabase,
      TableRecords,
      TableMeta,
    },
  })
  export default class Main extends Vue {
    public $notify: any = this.$notify;
    private activeTab: string = 'records';
    @Getter private currentDb!: string;
    @Getter private currentTable!: string;
    @Getter private response!: { message: string; title: string; type: string };
    @Getter private loading!: boolean;
    @Mutation private notified: any;
    @State(namespace) private database!: RootState;
    @Action('submitRemoteForm', { namespace }) private submitRemoteForm: any;
    @Action('submitLocalForm', { namespace }) private submitLocalForm: any;
    @Mutation('setToDefault', { namespace }) private setToDefault: any;
    private updated() {
      if (this.response.message) {
        this.$notify({
          title: this.response.title,
          message: this.response.message,
          type: this.response.type,
          duration: 3000,
        });
        this.notified();
      }
    }
  }

import RecordList from '../components/RecordList.vue';
import RecordListFilter from '../components/RecordListFilter.vue';
import RecordFooter from '../components/RecordFooter.vue';

const namespace: string = 'records';

@Component({
  components: {
    RecordList,
    RecordListFilter,
    RecordFooter,
  },
})
export default class TableRecords extends Vue {
  @Getter private currentTable: any;
  @State(namespace) private records!: RecordModuleState;
  @Getter('itemCount', { namespace }) private itemCount!: number;
  @Getter('keys', { namespace }) private keys!: {
    hashKey: string;
    rangeKey: string;
  };
  @Getter('getKeys', { namespace }) private getKeys!: Array<{ value: string }>;
  @Getter('tableDataPage', { namespace }) private tableDataPage!: any[];
  @Getter('hideHashKey', { namespace }) private hideHashKey!: boolean;
  @Action('generateMeta', { namespace }) private generateMeta: any;
  @Action('filterRecords', { namespace }) private filterRecords: any;
  @Action('getItem', { namespace }) private getItem: any;
  @Action('removeSelected', { namespace }) private removeSelected: any;
  @Action('getLimitedRows', { namespace }) private getLimitedRows: any;
  @Action('getPreviousRecords', { namespace }) private getPreviousRecords: any;
  @Action('getNextRecords', { namespace }) private getNextRecords: any;
  @Action('refreshTable', { namespace }) private refreshTable: any;