Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Global error handling
<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>
<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>
export function setLoading (context, payload) {
context.commit('SET_LOADING', payload.value)
}
export function setErrorMessage (context, payload) {
context.commit('SET_ERROR_MESSAGE', payload.message)
}
export function loading (state) {
return state.loading
}
export function errorMessage (state) {
return state.errorMessage
}
// 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
}
export function SET_LOADING (state, value = true) {
state.loading = value
}
export function SET_ERROR_MESSAGE (state, value = '') {
state.errorMessage = value
}
export default {
loading: false,
errorMessage: ''
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment