Блог

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

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

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

 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 в качестве CMS API без головы.

проблема здесь в том, что вы не можете использовать ‘this’ внутри асинхронной функции. Способ выполнить то, что вам нужно, — использовать контекст ‘params’, предоставляемый nuxthttps://nuxtjs.org/api/context это позволит вам передать uid в запрос. Вы можете увидеть, как это сделать ниже.

 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 внутри папки news в _uid.vue и иметь :
Новости/
_uid.vue

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