How to use the vuex.mapMutations function in vuex

feedrate: 5,
			editAmountDialog: {
				shown: false,
				index: 0,
				preset: 0
			},
			editFeedrateDialog: {
				shown: false,
				index: 0,
				preset: 0
			}
		}
	},
	methods: {
		...mapActions('machine', ['sendCode']),
		...mapMutations('machine/settings', ['setExtrusionAmount', 'setExtrusionFeedrate']),
		async buttonClicked(extrude) {
			if (!this.currentTool.extruders.length) {
				return;
			}

			let amounts;
			if (this.mixValue[0] === 'mix') {
				// Split total amount to extrude evenly
				amounts = [this.amount];
			} else {
				// Extrude given amount via each selected extruder drive
				amounts = this.currentTool.extruders.map(extruder => (this.mix.indexOf(extruder) !== -1) ? this.amount : 0);
			}

			this.busy = true;
			try {

"setLogin",
      "setCurLng",
      "setUpdate",
      "setFirstLanguage"
    ]),
    ...mapActions("wallet", ["getAccounts", "deleteWallet", "addAccount"]),
    ...mapActions([
      "nodeLists",
      "apiConfig",
      "switchAPINode",
      "init",
      "UpdateVersion",
      "IndexedDBQuery"
    ]),
    ...mapActions("account", ["logoutBCXAccount"]),
    ...mapMutations("common", [
      "WalletRegister",
      "privateStore",
      "AccountLogin"
    ]),
    changeLanguage(e) {
      this.setFirstLanguage(true);
      this.$i18n.locale = this.lang;
      this.setCurLng(this.lang);
    },
    closedDialog() {
      this.currentCreateVisible = false;
    },
    RegisterAccount() {
      this.WalletRegister(true);
      // this.$router.push({ name: "createAccount" });
    },

<style lang="stylus"></style>

export default {
    name: 'projects-list',
    data () {
      return {
        list: []
      }
    },
    props: {
      projectsList: Array,
      pageNo: Number,
      pageSize: Number
    },
    methods: {
      ...mapActions('projects', ['deleteProjects']),
      ...mapMutations('dag', ['setProjectName']),
      _switchProjects (item) {
        this.setProjectName(item.name)
        localStore.setItem('projectName', `${item.name}`)
        localStore.setItem('projectId', `${item.id}`)
        this.$router.push({ path: `/projects/index` })
      },
      _closeDelete (i) {
        this.$refs[`poptip-${i}`][0].doClose()
      },
      /**
       * Delete Project
       * @param item Current record
       * @param i index
       */
      _delete (item, i) {
        this.deleteProjects({

import Modal from '@/components/Modal';
import QueueItems from '@/views/Library/QueueItems';
import YoutubeModal from '@/components/YoutubeModal';

export default {
  name: 'home',
  components: { YoutubeModal, QueueItems, Modal, LyricsModal, Sidebar },
  computed: {
    ...mapState('modals', {
      lyricsModal: (state) => state.lyricsModal,
      youtubeModal: (state) => state.youtubeModal,
      queueModal: (state) => state.queueModal,
    }),
  },
  methods: {
    ...mapMutations('modals', {
      setLyricsModal: 'setLyricsModal',
      setQueueModal: 'setQueueModal',
      setYoutubeModal: 'setYoutubeModal',
    }),
  },
};

},
        computed:   {
            ...mapState('results/display', ['viewerImageIndex', 'viewerImagePage']),
            ...mapGetters('results/display', ['viewerImage']),
            firstImage() {
                return this.viewerImageIndex === 0;
            },
            lastImage() {
                return this.viewerImagePage.length <= (this.viewerImageIndex + 1);
            },
            isMAM() {
                return this.viewerImage.image.preview.startsWith('https://www.nhm.ac.uk/services/media-store/asset/')
            }
        },
        methods:    {
            ...mapMutations('results/display', ['hideImage', 'setViewerImage']),
            previousImage() {
                if (!this.firstImage) {
                    this.changeImage(this.viewerImageIndex - 1);
                }
            },
            nextImage() {
                if (!this.lastImage) {
                    this.changeImage(this.viewerImageIndex + 1);
                }
            },
            changeImage(index) {
                this.loading = this.viewerImage.image.preview !== this.viewerImagePage[index].image.preview;
                this.setViewerImage(index);
            },
            keyListener(event) {
                if (event.key === 'ArrowRight') {

computed: {
    ...mapState("LeftDialog/FileMenu/Component/Registration", {
      loading: state => state.loading,
      user_name: state => state.user_name,
      complete_name: state => state.complete_name,
      gender: state => state.gender,
      email: state => state.email,
      password: state => state.password,
      password_confirm: state => state.password_confirm
    })
  },
  methods: {
    ...mapActions("LeftDialog/FileMenu/Component/Registration", {
      doLogin: "doLogin"
    }),
    ...mapMutations("LeftDialog/FileMenu/Component/Registration", {
      SET_LOADING: "SET_LOADING",
      SET_USER_NAME: "SET_USER_NAME",
      SET_COMPLETE_NAME: "SET_COMPLETE_NAME",
      SET_GENDER: "SET_GENDER",
      SET_EMAIL: "SET_EMAIL",
      SET_PASSWORD: "SET_PASSWORD",
      SET_PASSWORD_CONFIRM: "SET_PASSWORD_CONFIRM"
    }),
    ...mapMutations("LeftDialog/FileMenu/Layout", {
      setPanelName: "setPanelName"
    }),
  },
  data() {
    return {
      indicator: 
    };

ChannelSetItem,
    },
    data() {
      return {
        loading: true,
      };
    },
    computed: mapGetters('channel_list', ['channelSets']),
    mounted() {
      this.loadChannelSetList().then(() => {
        this.loading = false;
      });
    },
    methods: {
      ...mapActions('channel_list', ['loadChannelSetList']),
      ...mapMutations('channel_list', {
        addChannelSet: 'ADD_CHANNELSET',
      }),
      openAboutChannelSets() {
        new ChannelSetInformationModalView({});
      },
      newChannelSet() {
        new ChannelSetModalView({
          modal: true,
          isNew: true,
          model: getChannelSetModel({}),
          onsave: this.addChannelSet,
        });
      },
    },
  };

if( this.projectID )
        {
           result = this.projectID
        }
        return result
      },

      getTaskUrl: function () {
        return '/api/project/'+ this.project +'/version/0/project_tasks?page_size=10000'
      }

    },
    methods:
      {
        ...mapMutations('task', ['setTaskChange']),
        ...mapMutations('projectglobal', ['setViewDialogShow','setRightPanelShow']),

          taskResultData: function (resp) {
          let soucreData = resp.result.results
          if (!soucreData) {
            soucreData = resp.result
          }
          return soucreData
        },

        taskDependencyData: function (resp) {
          let soucreData = resp.result.results
          if (!soucreData) {
            soucreData = resp.result
          }
          return soucreData
        },