How to use the vuex.mapActions function in vuex

import { mapActions } from 'vuex';
import helpers from '@/store/helpers';

export default {
  name: 'artwork-and-title',
  props: {
    item: Object,
    type: String,
  },
  data() {
    return {
      optionsVisible: false,
    };
  },
  methods: {
    ...mapActions('player', {
      play: 'play',
    }),
    getArtwork: helpers.getUrl,
    getSafe: helpers.getSafe,
    setQueue: helpers.setQueue,

    async playItem() {
      await this.setQueue(this.item.attributes.playParams);
      this.play();
    },
  },
  computed: {
    isExplicit() {
      return this.getSafe(() => this.item.attributes.contentRating === 'explicit', false);
    },
  },

return this.charLimit - this.description.length;
      },
      charLimit() {
        return 400;
      },
      token() {
        let token = this.channelSet.get('secret_token');
        return token && token.display_token;
      },
      channelCount() {
        return this.channels.length;
      }
    }
  ),
  methods: Object.assign(
    mapActions('channel_set', [
      'goToSelectChannels',
      'loadChannelSetChannels'
    ]),
    mapMutations('channel_set', {
      setName: 'SET_NAME',
      setDescription: 'SET_DESCRIPTION',
    }),
    {
      copyToken() {
        let element = this.$refs.tokenText;
        element.select();
        var self = this;
        try {
          document.execCommand("copy");
          this.copyStatus = copyStatusCodes.SUCCESS;
        } catch(e) {

}
        },
        async created () {
            try {
                this.properties = await this.getProperties()
                this.header = await this.getHeader()
                this.search()
            } catch (e) {
                console.log(e)
            }
        },
        mounted () {
            this.calcMinusHeight()
        },
        methods: {
            ...mapActions('objectModelProperty', ['searchObjectAttribute']),
            ...mapActions('procConfig', ['searchProcess']),
            getProperties () {
                return this.searchObjectAttribute({
                    params: this.$injectMetadata({
                        'bk_obj_id': 'process',
                        'bk_supplier_account': this.supplierAccount
                    }),
                    config: {
                        requestId: 'post_searchObjectAttribute_process',
                        fromCache: true
                    }
                })
            },
            getHeader () {
                const headerKey = [
                    'bk_process_name',

},
        watch: {
            bizId () {
                this.getData()
            },
            objId () {
                this.getData()
            }
        },
        created () {
            this.getData()
        },
        methods: {
            ...mapActions('objectModelFieldGroup', ['searchGroup']),
            ...mapActions('objectModelProperty', ['searchObjectAttribute']),
            ...mapActions('objectBiz', [
                'searchBusinessById'
            ]),
            setBreadcrumbs (inst) {
                this.$store.commit('setTitle', `${this.model.bk_obj_name}【${inst.bk_biz_name}】`)
            },
            async getData () {
                try {
                    const [inst, properties, propertyGroups] = await Promise.all([
                        this.getInstInfo(),
                        this.getProperties(),
                        this.getPropertyGroups()
                    ])

                    this.inst = inst
                    this.properties = properties
                    this.propertyGroups = propertyGroups

}
                            break
                        default:
                            this.fieldInfo.option = ''
                    }
                }
            }
        },
        created () {
            this.originalFieldInfo = this.$tools.clone(this.fieldInfo)
            if (this.isEditField) {
                this.initData()
            }
        },
        methods: {
            ...mapActions('objectModelProperty', [
                'createObjectAttribute',
                'updateObjectAttribute'
            ]),
            initData () {
                for (const key in this.fieldInfo) {
                    this.fieldInfo[key] = this.$tools.clone(this.field[key])
                }
                this.originalFieldInfo = this.$tools.clone(this.fieldInfo)
            },
            async validateValue () {
                if (!await this.$validator.validateAll()) {
                    return false
                }
                if (this.$refs.component && this.$refs.component.hasOwnProperty('validate')) {
                    if (!await this.$refs.component.validate()) {
                        return false

},
  destroyed () {
    if (this.selectAllField) {
      this.selectAllPayments()
    }
  },
  methods: {
    ...mapActions('payment', [
      'fetchPayments',
      'selectAllPayments',
      'selectPayment',
      'deletePayment',
      'deleteMultiplePayments',
      'setSelectAllState'
    ]),
    ...mapActions('customer', [
      'fetchCustomers'
    ]),
    async fetchData ({ page, filter, sort }) {
      let data = {
        customer_id: this.filters.customer !== null ? this.filters.customer.id : '',
        payment_number: this.filters.payment_number,
        payment_mode: this.filters.payment_mode ? this.filters.payment_mode : '',
        orderByField: sort.fieldName || 'created_at',
        orderBy: sort.order || 'desc',
        page
      }

      this.isRequestOngoing = true

      let response = await this.fetchPayments(data)

deep: true
    }
  },
  beforeMount() {
    this.updateChecked()
  },
  methods: {
    ...mapActions('layers', [
      'addLayer',
      'toggleLocked',
      'toggleCollapsed',
      'addModuleToLayer',
      'updateModuleOrder',
      'moveModuleInstance'
    ]),
    ...mapActions('modVModules', ['createActiveModule']),
    ...mapMutations('layers', [
      'setLayerName',
      'setLayerFocus',
      'setClearing',
      'setInherit',
      'setInheritFrom',
      'setPipeline',
      'setDrawToOutput'
    ]),
    onDrop(e) {
      const { moduleName, collection } = e.payload

      if (e.addedIndex === null && e.removedIndex === null) return

      if (collection === 'gallery') {
        this.createActiveModule({ moduleName }).then(module => {

if (this.newInvoice.discount_type === 'percentage') {
        this.newInvoice.discount_val = (this.newInvoice.discount * newValue) / 100
      }
    }
  },
  created () {
    this.loadData()
    this.fetchInitialItems()
    this.resetSelectedCustomer()
    window.hub.$on('newTax', this.onSelectTax)
  },
  methods: {
    ...mapActions('modal', [
      'openModal'
    ]),
    ...mapActions('invoice', [
      'addInvoice',
      'fetchCreateInvoice',
      'fetchInvoice',
      'resetSelectedCustomer',
      'selectCustomer',
      'updateInvoice'
    ]),
    ...mapActions('item', [
      'fetchItems'
    ]),
    selectFixed () {
      if (this.newInvoice.discount_type === 'fixed') {
        return
      }

      this.newInvoice.discount_val = this.newInvoice.discount * 100