export const state = () => ({
data: {}
})
export const getters = {
data: state => state.data
}
export const actions = {
getData ({ commit }) {
this.$axios('https://jsonplaceholder.typicode.com/todosx/1')
.then((response) => {
commit('SET_DATA', response.data)
})
.catch((err) => {
// Navigate to error page
})
}
}
export const mutations = {
SET_DATA (state, data) {
state.data = data
}
}
After catching error in the catch for the axios would like to navigate to the error page from the Nuxt store. What will be the best way to achieve this?
In your catch you can redirect the user to the error page by
return this.$nuxt.error({ statusCode: 404, message: 'Your error message' })
and in your error.vue page you can access it with error prop like:
<h1>{{ error.statusCode }}</h1>
<h2>{{ error.message }} </h2>
This kind of template should work fine on top of $nuxt.error
<template>
<div class="container">
<h1 v-if="error.statusCode === 404">Page not found</h1>
<h1 v-else>An error occurred</h1>
<NuxtLink to="/">Home page</NuxtLink>
</div>
</template>
<script>
export default {
props: ['error'],
}
</script>
As shown in the documentation: https://nuxtjs.org/docs/2.x/directory-structure/layouts#error-page