Global error handling

layouts.MyLayout.vue

<template>
  <q-layout view="lHh Lpr lFf">
    <q-layout-header>
      <q-toolbar
        color="primary"
        :glossy="$q.theme === 'mat'"
        :inverted="$q.theme === 'ios'"
      >
        <q-btn
          flat
          dense
          round
          @click="leftDrawerOpen = !leftDrawerOpen"
          aria-label="Menu"
        >
          <q-icon name="menu" />
        </q-btn>

        <q-toolbar-title>
          Antares-Kód
        </q-toolbar-title>
      </q-toolbar>
    </q-layout-header>
      <q-page-container>
          <router-view />
      </q-page-container>
  </q-layout>
</template>
<script>
  import { mapGetters } from 'vuex'
  export default {
    name: 'MyLayout',
    data () {
      return {
        leftDrawerOpen: this.$q.platform.is.desktop
      }
    },
    computed: {
      ...mapGetters({
        loading: 'application/loading',
        errorMessage: 'application/errorMessage'
      })
    },
    watch: {
      loading (val, oldVal) {
        if (val) {
          this.$q.loading.show()
        } else {
          this.$q.loading.hide()
        }
      },
      errorMessage (val, oldVal) {
        this.$q.notify(val)
      }
    }
  }
</script>

pages.somePage.vue

<template>
  <q-page padding>
    <q-field label="Save">
      <q-btn round color="secondary" icon="card_giftcard" @click="pushSubmit" />
    </q-field>
  </q-page>
</template>
<script>
  export default {
    methods: {
      pushSubmit () {
        this.$store.dispatch('application/setLoading', {value: true})
        this.$store.dispatch('application/setErrorMessage', {message: 'Hajrá'})
        setTimeout(() => {
          this.$store.dispatch('application/setLoading', {value: false})
        }, 3000)
      }
    }
  }
</script>

store.application.actions.js

export function setLoading (context, payload) {
  context.commit('SET_LOADING', payload.value)
}

export function setErrorMessage (context, payload) {
  context.commit('SET_ERROR_MESSAGE', payload.message)
}

store.application.getters.js

export function loading (state) {
  return state.loading
}

export function errorMessage (state) {
  return state.errorMessage
}

store.application.index.js

// It is only the default
import state from './state'
import * as getters from './getters'
import * as mutations from './mutations'
import * as actions from './actions'

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
}

store.application.mutations.js

export function SET_LOADING (state, value = true) {
  state.loading = value
}

export function SET_ERROR_MESSAGE (state, value = '') {
  state.errorMessage = value
}

store.application.state.js

export default {
  loading: false,
  errorMessage: ''
}