How to use vuex-class - 10 common examples

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;

import { Component, Vue } from 'vue-property-decorator'
import {
  State,
  Action,
  namespace
} from 'vuex-class'
import SockJS from 'simple-websocket'
import { BContainer } from 'bootstrap-vue/esm/components/layout/container'
import { BCol } from 'bootstrap-vue/esm/components/layout/col'
import { BRow } from 'bootstrap-vue/esm/components/layout/row'
import QrcodeVue from 'qrcode.vue'
import { BPopover } from 'bootstrap-vue/esm/components/popover/popover'
import filters from './filters'
import './home.scss'

const Module = namespace('home')

export interface Tip {
  icon: string
  title: any
  des: any
  url: any
}

@Component({
  template: require('./home.html'),
  components: {
    'b-container': BContainer,
    'b-col': BCol,
    'b-row': BRow,
    'b-popover': BPopover,
    'qrcode': QrcodeVue

Action,
  namespace
} from 'vuex-class'
import QrcodeVue from 'qrcode.vue'
import { BEmbed } from 'bootstrap-vue/esm/components/embed/embed'
import { BFormSelect } from 'bootstrap-vue/esm/components/form-select/form-select'
import { BButton } from 'bootstrap-vue/esm/components/button/button'
import SockJS from 'simple-websocket'
import { BModal } from 'bootstrap-vue/esm/components/modal/modal'
import MonacoEditor from 'vue-monaco-editor'
import * as types from '../../store/mutation-types'
import { Environment } from '../../store/modules/weex'
import { SnotifyToastConfig, SnotifyPosition } from 'vue-snotify'
import './weex.scss'

const Module = namespace('weex')

@Component({
  template: require('./weex.html'),
  components: {
    'b-embed': BEmbed,
    'b-button': BButton,
    'b-modal': BModal,
    'b-form-select': BFormSelect,
    'monacoeditor': MonacoEditor,
    'qrcode': QrcodeVue
  }
})
export class WeexComponent extends Vue {
  @State('webSocketHost') webSocketHost
  @State('helpSetting') helpSetting
  @State('bundleSetting') bundleSetting

import { BFormCheckbox } from 'bootstrap-vue/esm/components/form-checkbox'
import { BEmbed } from 'bootstrap-vue/esm/components/embed'
import { BTable } from 'bootstrap-vue/esm/components/table'
import { BProgress } from 'bootstrap-vue/esm/components/progress'
import { BButton } from 'bootstrap-vue/esm/components/button'
import { BModal } from 'bootstrap-vue/esm/components/modal'
import SockJS from 'simple-websocket'
import * as types from '../../store/mutation-types'
import { Parser } from '../../util/parser'
import { SelectComponent } from '../../components/select'
import VeWaterfallBar from 'v-charts/lib/waterfall.common'
import { BFormRadioGroup } from 'bootstrap-vue/esm/components/form-radio'
import { BPopover } from 'bootstrap-vue/esm/components/popover'
import './analyze.scss'

const Module = namespace('analyze')

@Component({
  template: require('./analyze.html'),
  components: {
    'b-embed': BEmbed,
    'b-button': BButton,
    'wx-select': SelectComponent,
    'b-checkbox': BFormCheckbox,
    'b-progress': BProgress,
    'b-table': BTable,
    'b-modal': BModal,
    'b-popover': BPopover,
    'b-form-radio-group': BFormRadioGroup,
    've-waterfall': VeWaterfallBar
  }
})

} else {
      return _.orderBy(
        this.hooks,
        (hook: yuki.TextThread) => this.texts[hook.handle].length,
        'desc'
      )
    }
  }

  @(namespace('Hooks').State('hookInfos'))
  public hooks!: yuki.TextThread[]
  @(namespace('Hooks').State('texts'))
  public texts!: string[]
  @(namespace('Hooks').State('currentDisplayHookIndex'))
  public currentIndex!: number
  @(namespace('View').State('isWindowTooHigh'))
  public isWindowTooHigh!: boolean

  get classObject () {
    return {
      'small-margin': true,
      'fixed-scroll': !this.isWindowTooHigh,
      'fixed-scroll-margin-top': this.isWindowTooHigh
    }
  }

  public openInputHookDialog () {
    this.openInputHook = true
  }
  public closeInputHookDialog () {
    this.openInputHook = false
    this.hookCode = ''