How to use the vuex.mapGetters function in vuex

import { mapGetters } from 'vuex';
import { Getters } from 'simput/src/stores/types';

import GlobalSettings from 'simput/src/components/core/GlobalSettings';
import WorkflowMenu from 'simput/src/components/core/WorkflowMenu';

// ----------------------------------------------------------------------------

export default {
  name: 'ControlsDrawer',
  components: {
    GlobalSettings,
    WorkflowMenu,
  },
  computed: Object.assign(
    mapGetters({
      dataModel: Getters.SIMPUT_MODEL,
    })
  ),
  data() {
    return {
      activeTab: 0,
    };
  },
};

},

        watch: {
            // update Howler volume on volume change
            volume(value) {
                Howler.volume(value);
            },

            // update Howler muted state on mute change
            muted(value) {
                Howler.mute(value);
            },
        },

        computed: {
            ...mapGetters(PlayerNamespace, {
                isPaused: 'isPaused',
                isPlaying: 'isPlaying',
                isStopped: 'isStopped',
                isLoading: 'isLoading',
                queueSize: 'queueSize',
                currentSong: 'currentSong',
            }),

            ...mapState({
                apiToken: state => state.auth.token,
                apiUrl: state => state.config.api.base,
            }),

            ...mapState(PlayerNamespace, {
                mode: state => state.mode,
                queue: state => state.queue,

import { mapActions, mapGetters, mapState } from 'vuex'
import DoughnutChart from '@/components/molecules/DoughnutChart'
import BarChart from '@/components/molecules/BarChart'

export default {
  layout: 'project',

  middleware: ['check-auth', 'auth', 'check-admin'],

  components: {
    DoughnutChart,
    BarChart
  },

  computed: {
    ...mapGetters('statistics', ['userStats', 'labelStats', 'progress']),
    ...mapState('statistics', ['stats'])
  },

  async created() {
    await this.fetchStatistics({
      projectId: this.$route.params.id
    })
  },

  methods: {
    ...mapActions('statistics', ['fetchStatistics'])
  },

  validate({ params }) {
    return /^\d+$/.test(params.id)
  }

ContentTag
  },

  mixins: [
    Iframe
  ],

  props: {
    id: {
      type: String,
      required: true
    }
  },

  computed: {
    ...mapGetters('state', ['config', 'pages']),
    ...mapGetters('preferences', ['currentTheme']),

    page () {
      return this.pages[this.id]
    },

    iframeSrc () {
      return `${window.UIengine.base}_tokens/${this.currentTheme.id}/${this.page.id}.html`
    }
  },

  mounted () {
    this.mountResizableIframe(this.$refs.iframe)
  },

  beforeDestroy () {

import { mapGetters } from 'vuex'

export default {
    computed: {
        ...mapGetters('objectModelClassify', ['models', 'getModelById']),
        INST_AUTH () {
            const params = this.$route.params
            const bizId = params.bizId
            const instId = params.instId
            return {
                U_BUSINESS: {
                    type: this.$OPERATION.U_BUSINESS,
                    relation: [parseInt(bizId)]
                },
                U_INST: {
                    type: this.$OPERATION.U_INST,
                    relation: [(this.getModelById(params.objId) || {}).id, parseInt(instId)]
                }
            }
        }
    }

import GuidelineCard from '@/components/organisms/annotation/GuidelineCard'

export default {
  components: {
    BaseDialog,
    GuidelineCard
  },

  data() {
    return {
      dialog: false
    }
  },

  computed: {
    ...mapGetters('projects', ['currentProject'])
  },

  created() {
    this.setCurrentProject(this.$route.params.id)
  },

  methods: {
    ...mapActions('projects', ['setCurrentProject'])
  }
}

type: String,
      required: true,
    },
  },
  data() {
    return {
      isExpanded: false,
      channels: [],
      isLoading: false,
    }
  },
  components: {
    ChannelItem,
  },
  computed: Object.assign(
    mapGetters('channel_set', [
      'allChannels'
    ]),
    {

      translateName() {
        return this.$tr(this.listName);
      },
      idName() {
        return "#" + this.listName;
      },
      togglerClass() {
        return (this.isExpanded)? 'arrow_drop_down': 'arrow_drop_up';
      },
    }
  ),
  methods: Object.assign(