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

RecordAction,
  },
})
export default class Records extends Vue {
  private pageNumber: number = 1;
  private pageSize: any = 15;
  private filterText: any = '';
  @Getter('loading') private loading: any;
  @State('records') private records: any;
  @Getter('header', { namespace }) private header: any;
  @Getter('keys', { namespace }) private keys: any;
  @Getter('data', { namespace }) private data: any;
  @Getter('attributes', { namespace }) private attributes: any;
  @Getter('visible', { namespace }) private visible: any;
  @Action('generateJsonContent', { namespace }) private generateJsonContent: any;
  @Action('removeItem', { namespace }) private removeItem: any;
  @Action('getRecords', { namespace }) private getRecords: any;
  @Action('getItem', { namespace }) private getItem: any;
  @Mutation('setHeader', { namespace }) private setHeader: any;
  @Mutation('newAttribute', { namespace }) private newAttribute: any;
  private beforeUpdate() {
    if (this.loading && this.pageNumber !== 1) {
      this.pageNumber = 1;
      const { handleCurrentChange }: any = this.$refs.pagination;
      handleCurrentChange(1);
    }
  }
  private total(): number {
    return this.filterTable().length;
  }
  private currentPage(val: number) {
    this.pageNumber = val;

import { Vue, Component, Prop } from 'vue-property-decorator';
import { Action, Mutation, Getter, State } from 'vuex-class';
import { RecordModuleState } from '../store/modules/records/types';
import CreateModal from '../components/CreateModal.vue';
import DeleteModal from '../components/DeleteModal.vue';
const namespace: string = 'records';
@Component({
  components: {
    CreateModal,
    DeleteModal,
  },
})
export default class RecordModals extends Vue {
  @State(namespace) private records!: RecordModuleState;
  @Action('putItem', { namespace }) private putItem: any;
  @Action('removeItem', { namespace }) private removeItem: any;
  @Action('removeSelected', { namespace }) private removeSelected: any;
  @Mutation('setMeta', { namespace }) private setMeta: any;
  @Mutation('toggleCreateModal', { namespace }) private toggleCreateModal: any;
  @Mutation('toggleDeleteModal', { namespace }) private toggleDeleteModal: any;
  @Mutation('toggleGroupDeleteModal', { namespace })
  private toggleGroupDeleteModal: any;
}

},
})
export default class Records extends Vue {
  private pageNumber: number = 1;
  private pageSize: any = 15;
  private filterText: any = '';
  @Getter('loading') private loading: any;
  @State('records') private records: any;
  @Getter('header', { namespace }) private header: any;
  @Getter('keys', { namespace }) private keys: any;
  @Getter('data', { namespace }) private data: any;
  @Getter('attributes', { namespace }) private attributes: any;
  @Getter('visible', { namespace }) private visible: any;
  @Action('generateJsonContent', { namespace }) private generateJsonContent: any;
  @Action('removeItem', { namespace }) private removeItem: any;
  @Action('getRecords', { namespace }) private getRecords: any;
  @Action('getItem', { namespace }) private getItem: any;
  @Mutation('setHeader', { namespace }) private setHeader: any;
  @Mutation('newAttribute', { namespace }) private newAttribute: any;
  private beforeUpdate() {
    if (this.loading && this.pageNumber !== 1) {
      this.pageNumber = 1;
      const { handleCurrentChange }: any = this.$refs.pagination;
      handleCurrentChange(1);
    }
  }
  private total(): number {
    return this.filterTable().length;
  }
  private currentPage(val: number) {
    this.pageNumber = val;
  }