Маршрутизация 404 с NuxtJS и Vuex - компоненты должны вызывать мутации или действия могут возвращать обещания? - PullRequest
Новая
       5

Маршрутизация 404 с NuxtJS и Vuex - компоненты должны вызывать мутации или действия могут возвращать обещания?

0 голосов
/ 31 августа 2018

Я пытаюсь выяснить, как обрабатывать внешнюю проверку моих маршрутов в NuxtJS.

Допустим, у меня есть страница сообщений, которая загружается динамически 

{ path: '/posts/:id?', name: 'posts-id', component: Post }

Затем, чтобы проверить, есть ли фактическое сообщение с данным идентификатором, мне нужно вызвать мой API и либо получить сообщение, либо обработать 404.

AsyncData дает мне такую ​​возможность на примере ниже 

export default {
  asyncData ({ params, error }) {
    return axios.get(`https://my-api/posts/${params.id}`)
    .then((res) => {
      return { title: res.data.title }
    })
    .catch((e) => {
      error({ statusCode: 404, message: 'Post not found' })
    })
  }
}

Тем не менее, он устанавливает данные для компонента, НО я хочу, чтобы это было установлено в моем магазине Vuex. Это решается изменением asyncData на fetch и позволяет мне напрямую изменять и вызывать действия. Непосредственно мутировать неправильно, но если я использую действие, я не могу обработать ошибку 404.

Итак, как мне это сделать?

Ответы [ 2 ]

0 голосов
/ 09 октября 2018

Я упустил из виду тот факт, что вы можете просто вернуть обещание с акции. Это позволило мне обработать состояние 404 в самом компоненте, сохраняя мой запрос в моем магазине.

Страница сообщения 

async fetch ({ store, params, error }) {
  await store.dispatch('article/GET', params).catch((e) => {
    error({ statusCode: 404, message: 'Post not found' })
  })
},

Действие магазина 

async GET({commit}, params) {
  return new Promise((resolve, reject) => {
    axios.get('/posts/' params[0).then((res) => {
      let data = res.data
      commit('SET', data)
      resolve()
    }).catch((e) => {
      reject(e)
    })
  })
},
0 голосов
/ 01 сентября 2018

Afaik разница между asyncData и fetch только в том, что в первом случае вы возвращаете данные, а во втором - нет. Это все. Вы могли бы делать все остальные вещи так же. Что касается ручки 404 - не уверен, что проблема у вас с ним. Но как-то так будет работать 

export default {
  fetch ({ params, error, store }) {
    return axios.get(`https://my-api/posts/${params.id}`)
    .then((res) => {
      store.dispatch('yourAction',  { title: res.data.title } )
    })
    .catch((e) => {
      error({ statusCode: 404, message: 'Post not found' })
    })
  }
}
...