Vue3中产品详情获取及Pinia、路由参数问题求助

一、产品详情数据来源选择 #

优先从Pinia读取数据，理由如下：

• 减少不必要的API请求，提升页面加载速度和用户体验
• 借助Pinia统一管理状态，确保数据一致性
• 特殊场景处理：如果用户直接访问产品详情页（未经过产品列表页，导致Pinia中无数据），此时需要调用API获取该产品的详细数据，可以在Pinia中新增一个fetchProductById的action来处理这种情况

二、解决$route is undefined错误 #

在Vue 3的<script setup>语法中，不能通过this.$route访问路由信息，需要使用useRoute钩子来获取路由参数。以下是修正后的产品详情组件代码：

修正后的产品详情组件 #

<template>
  <div>
    <h1>Product Details</h1>
    <h1>{{ productDetails?.name || '加载中...' }}</h1>
    <h2>{{ productDetails?.sku }}</h2>
    <h3>{{ productDetails?.asin }}</h3>
    <h3>{{ productDetails?.description }}</h3>
  </div>
</template>  

<script setup>
import { ref, onMounted, computed } from "vue";
import { useRoute } from "vue-router";
import { useProductsStore } from "../stores/products";

const route = useRoute();
const store = useProductsStore();

// 获取URL中的产品ID，注意转换为数字匹配store中的ID类型
const productId = Number(route.params.id);

// 从Pinia中获取对应产品详情
const productDetails = computed(() => {
  return store.getProductDetails(productId);
});

onMounted(async () => {
  // 如果Pinia中无产品数据，先调用列表接口获取全量数据
  if (store.products.length === 0) {
    await store.fetchProducts();
  }
});
</script>

额外优化建议 #

1. Pinia Store扩展：新增单产品获取action，用于直接访问详情页的场景，避免加载全量数据：

// 在useProductsStore的actions中添加
async fetchProductById(id) {
  try {
    const data = await axios.get(`http://127.0.0.1:8000/products/${id}.json`);
    // 更新或新增产品到Pinia状态
    const existingIndex = this.products.findIndex(p => p.id === id);
    if (existingIndex !== -1) {
      this.products[existingIndex] = data.data;
    } else {
      this.products.push(data.data);
    }
    return data.data;
  } catch (error) {
    alert(error);
    console.log(error);
  }
}

此时详情组件的onMounted可优化为：

onMounted(async () => {
  const targetProduct = store.getProductDetails(productId);
  // 如果Pinia中无该产品，调用单产品接口
  if (!targetProduct) {
    await store.fetchProductById(productId);
  }
});

2. 路由配置修正：原路由中的params: true是冗余配置，直接移除即可：

{
  path: "/catalog/:id",
  name: "productDetail",
  component: productDetail,
},

内容的提问来源于stack exchange，提问作者spaceCabbage