Vue 3 中 Prismic 数据提取：按类型、值和排序

2024-03-19 02:41:11

在 Vue 3 中使用 Prismic，按字段类型、值和排序提取数据

问题陈述

在 Vue 3 中，我们希望从 Prismic 提取特定类型的数据，同时根据字段的类型和值进行筛选和排序。以足球运动员为例，我们需要提取所有位置为守门员的球员，并按他们的球衣号码（升序）对他们进行排序。

解决方案

1. 筛选数据

使用 usePrismicQuery composable，我们可以通过添加谓词（predicates）来构建查询，筛选数据。谓词指定了要检查的字段、运算符和值。在本例中，我们检查 position 字段是否等于 "Goalkeeper"。

import { usePrismicQuery } from '@prismicio/vue'

const playersQuery = usePrismicQuery(
  prismicRef,
  {
    type: 'player',
    predicates: [
      {
        field: 'position',
        operator: 'equals',
        value: 'Goalkeeper'
      }
    ]
  }
)

2. 排序数据

在查询中，我们还可以指定排序（orderings），以根据特定的字段对结果进行排序。我们指定按 jersey_number 字段升序排序。

const playersQuery = usePrismicQuery(
  prismicRef,
  {
    type: 'player',
    predicates: [
      {
        field: 'position',
        operator: 'equals',
        value: 'Goalkeeper'
      }
    ]
  },
  {
    orderings: [
      {
        field: 'jersey_number',
        direction: 'asc'
      }
    ]
  }
)

3. 获取排序后的数据

usePrismicQuery composable 返回一个反应对象，其中包含请求的状态和数据。我们可以使用 data.results 属性来获取排序后的数据。

const players = playersQuery.data.results

完整示例

以下是一个完整的 Vue 3 组件，展示了如何从 Prismic 提取筛选和排序的数据：

<template>
  <ul>
    <li v-for="player in players" :key="player.id">
      {{ player.name }} - {{ player.jersey_number }}
    </li>
  </ul>
</template>

<script>
import { usePrismicQuery } from '@prismicio/vue'

export default {
  setup() {
    const playersQuery = usePrismicQuery(
      prismicRef,
      {
        type: 'player',
        predicates: [
          {
            field: 'position',
            operator: 'equals',
            value: 'Goalkeeper'
          }
        ]
      },
      {
        orderings: [
          {
            field: 'jersey_number',
            direction: 'asc'
          }
        ]
      }
    )

    return {
      players: playersQuery.data.results
    }
  }
}
</script>