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 } }Después de detectar un error en la captura de axios, me gustaría navegar a la página de error desde la tienda Nuxt . ¿Cuál será la mejor manera de lograr esto?
En su catch puede redirigir al usuario a la página de error por
return this.$nuxt.error({ statusCode: 404, message: 'Your error message' }) y en su página error.vue puede acceder a ella con error prop como:
<h1>{{ error.statusCode }}</h1> <h2>{{ error.message }} </h2>Este tipo de plantilla debería funcionar bien encima de $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>Como se muestra en la documentación: https://nuxtjs.org/docs/2.x/directory-structure/layouts#error-page