Блог

Главная - Вопросы по программированию - Как перейти на страницу ошибок из магазина Nuxt

Как перейти на страницу ошибок из магазина Nuxt

#vue.js #axios #nuxt.js #vuex

Вопрос:

 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
  }
}

После обнаружения ошибки в улове для axios хотелось бы перейти на страницу ошибки из магазина Nuxt. Каков будет наилучший способ достичь этого?

Комментарии:

1. this.$router.push('/404') должен сделать трюк, так как он либо существует, либо будет использовать error макет, так как он не может попасть на страницу.

2. Кстати, вы могли бы сделать его более плавным в шаблоне и отобразить «здесь нет информации» вместо того, чтобы перемещать пользователя на 404, вы не думаете?

3. Спасибо за ответ. Я хотел бы показать здесь пользовательский шаблон ошибки. Итак, для этого можно отправить что-то вроде $nuxt.error({ Код состояния: 404, сообщение: «сообщение об ошибке»}) , как на страницах. Я попытался сделать то же самое в магазине и не смог понять, как это сделать.

Ответ №1:

В вашем catch вы можете перенаправить пользователя на страницу с ошибкой,

 return this.$nuxt.error({ statusCode: 404, message: 'Your error message' })

и на своей error.vue странице вы можете получить к ней доступ с помощью опоры для ошибок, например:

 <h1>{{ error.statusCode }}</h1>
<h2>{{ error.message }} </h2>

Комментарии:

1. Спасибо за ответ. Он работает на странице, но внутри магазина vuex он выдает мне еще одну ошибку TypeError: Не удается прочитать свойства undefined (чтение «ошибка») . При печати этого файла.$nuxt он отображается неопределенным . Есть ли какой-нибудь способ получить доступ к этому файлу.$nuxt в магазине vuex?

Ответ №2:

Такой шаблон должен отлично работать поверх $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>

Как показано в документации: https://nuxtjs.org/docs/2.x/directory-structure/layouts#error-page

Метки: