如何对 Prismic 和 Nuxt 上的特定博客文章进行分页？答案

【问题标题】：How do I paginate specific blog posts on Prismic and Nuxt?如何对 Prismic 和 Nuxt 上的特定博客文章进行分页？
【发布时间】：2019-12-12 11:46:58
【问题描述】：

我正在尝试使用两个 <a> 标记对我的博客页面上的特定帖子进行分页。

根据Prismic Pagination API，实现这个就像传递参数链接?page=1一样简单，比如example.com/blog/?page=1，但是没有任何变化。

如果我 cannot use a component instance 更改 query page 选项，我如何query asyncData() 内部的异步函数？

pages/blog/index.vue:

<template>
  <div class="container">
    <h1>{{ title }}</h1>
    <h2>{{ content }}</h2>
    <section class="columns is-multiline is-centered">
      <article
        class="post box column is-3-widescreen is-4-tablet"
        v-for="(post, index) in posts"
        :key="index"
      >
        <nuxt-link :to="`/blog/${post.uid}`">
          <img :src="post.data.image.url" alt />
          <h3 class="title is-6">{{ Dom.RichText.asText(post.data.title) }}</h3>
        </nuxt-link>
      </article>
    </section>

    <!-- I want to PAGINATE my posts from here -->
    <nav class="pagination column">
      <a class="pagination-previous button is-black">&#x3c;</a>
      <a class="pagination-next button is-black">&#x3e;</a>
    </nav>
  </div>
</template>

<script>
import Prismic from 'prismic-javascript'
import PrismicDOM from 'prismic-dom'
import { initApi, generatePageData } from '@/prismic.config'

export default {
  data() {
    return {
      Dom: PrismicDOM,
      title: 'Blog',
      content:
        'Welcome to my blog. Browse through a streamline of tech tutorials that suits you needs.'
    }
  },

  head() {
    return {
      title: this.title,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: this.content
        }
      ]
    }
  },

  asyncData(context) {
    if (context.payload) {
      return generatePageData('blog_page', context.payload)
    } else {
      return initApi().then(api => {
        return api
          .query(Prismic.Predicates.at('document.type', 'blog_posts'), {
            pageSize: 3,
            page: 1
          })
          .then(response => {
            return generatePageData('blog_page', response.results)
          })
      })
    }
  }
}
</script>

【问题讨论】：

标签： pagination nuxt.js prismic.io

【解决方案1】：

为了使其正常工作，您需要设置watchQuery 以对更改做出反应。来自文档：

观察查询字符串并在更改时执行组件方法（asyncData、fetch、validate、layout...）

// inside page.vue
export default {
  // Watch for $route.query.page to call Component methods (asyncData, fetch, validate, layout, etc.)
  watchQuery: ['page']
}

现在页面正在被监视，您可以使用 NuxtLink 更新查询字符串参数。

<nuxt-link :to="`/blog?page=${page_num}`"

虽然在 asyncData 中您无法访问组件，但您可以访问 context 对象

export default {
  asyncData (context) {
    return axios.get(`https://my-api/posts?page=${context.query.page}`)
    .then((res) => {
      return { title: res.data.title }
    })
  }
}

【讨论】：