如何在 Vue.js 产品详情页面中使用 Pinia Store 和 Nuxt Apollo 查询产品详情？

2024-03-07 00:37:19

## 借助 Pinia Store 和 Nuxt Apollo 查询产品详情

在构建复杂的 Vue.js 应用程序时，管理数据状态至关重要。通过结合 Pinia Store 和 Nuxt Apollo，我们可以优雅地分离数据获取逻辑，并以可重用的方式访问数据。本文将深入探讨如何使用这些工具查询产品详情页面中的产品信息。

### 1. 创建 Pinia Store

Pinia Store 允许我们在独立的模块中管理应用状态。对于我们的产品详情页面，我们将创建一个名为 productStore 的 Pinia Store。该 Store 将包含一个 getProductData 函数，该函数使用 Apollo 客户端执行 GraphQL 查询以获取产品数据。

// product-store.js
import { defineStore } from 'pinia';
import { gql } from '@apollo/client/core';
import { useAsyncQuery } from '@vue/apollo-composable';

export const useProductStore = defineStore('product', () => {
  const getProductData = async (id) => {
    const query = gql`
      query GetProductsById($id: ID!) {
        product(id: $id) {
          id
          title
          vendor
          publishedAt
          handle
          variants(first: 100) {
            nodes {
              id
              title
              price {
                amount
              }
              image {
                url
                altText
                width
                height
              }
            }
          }
        }
      }
    `;

    const variables = {
      id: 'gid://shopify/Product/' + id,
    };

    const results = await useAsyncQuery(query, variables);
    return results;
  };

  return { getProductData };
});

### 2. 使用 Pinia Store

在产品详情组件中，我们可以使用 Pinia Store 访问 getProductData 函数并获取产品数据。

// ProductDetails.vue
<template>
  <div class="product-details">
    {{ JSON.stringify(product.value) }}
  </div>
</template>

<script setup>
  import { useProductStore } from '../stores/product-store';
  import { storeToRefs } from 'pinia';

  const productStore = useProductStore();
  const { isLoading } = storeToRefs(productStore);
  const product = computed(() => {
    if (isLoading.value) {
      return null;
    }
    return productStore.getProductData(route.query.id);
  });
</script>