Nuxt - доступ к асинхронным данным в динамическом маршруте - PullRequest
Новая
       35

Nuxt - доступ к асинхронным данным в динамическом маршруте

0 голосов
/ 26 марта 2019

У меня проблемы с асинхронными данными в динамических маршрутах Nuxt.

Пример структуры папок,

enter image description here

Myасинхронные данные 

async asyncData({context, error, req}) {
  try {
    const api = await Prismic.getApi(PrismicConfig.apiEndpoint, {req})

    let document = []
      const result = await api.getByUID('news', this.$route.params.slug)
      document = result.results

    return {
      document,
      documentId: result.id,
    }
  } catch (e) {
      error({ statusCode: 404, message: 'Page not found' })
    }
},

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

Я предполагаю, что это проблема, связанная с асинхронными данными, которые есть у Nuxt с компонентами, и чтоNuxt справится с этим в версии 3.0?

Но до тех пор я был бы признателен, если бы вы могли мне помочь с этим, мне нужно как-то заставить это работать.

Я использую Prismicкак безголовый API cms.

1 Ответ

3 голосов
/ 26 марта 2019

проблема в том, что вы не можете использовать 'this' внутри асинхронной функции.Чтобы выполнить то, что вам нужно, используйте контекст 'params', предоставленный nuxt https://nuxtjs.org/api/context, это позволит вам передать идентификатор в запрос.Вы можете увидеть, как это сделать ниже. 

async asyncData({ params, error, req }) {
  try{
    // Query to get API object
    const api = await Prismic.getApi(PrismicConfig.apiEndpoint, {req})

    // Query to get content by 'news' type and whatever the uid for the document is
    const result = await api.getByUID("news", params.uid)

    // Returns data to be used in template
    return {
      document: result.data,
      documentId: result.id,
    }
  } catch (e) {
    // Returns error page
    error({ statusCode: 404, message: 'Page not found' })
  }
},

Также для вашей файловой структуры вам не нужна папка _slug, вы можете просто переименовать index.vue внутри папки новостей в _uid.vue и иметь:news / _uid.vue

Полный блог, который мы создали в Prismic, можно посмотреть здесь: https://user -guides.prismic.io / examples / create-a-sample-blog-with-prismicи-nuxtjs

...