如何正确地从我的api在Vue3中获取单个产品

Question

我使用Pinia来存储我的产品目录，它从我的API (Django)中获得，这显示在一个表中。我希望能够点击其中一个产品并查看该产品的详细信息。

我应该为这个信息做一个新的API调用，还是应该把它存储在Pinia中?

另外，如何从URL访问产品的id ?

this.$route.params.id 

我试了这个^^^，我一直得到

$route is undefined

这是我的Pinia商店

import { defineStore } from "pinia";
import axios from "axios";
export const useProductsStore = defineStore("products", {
state: () => {
return {
products: [],
vendors: [],
vendorPrices: [],
productDetail: [],
};
},
getters: {
getProducts: (state) => {
return state.products;
},
getProductDetails: (state) => {
return (id) => state.products.find((product) => product.id === id);
},
},
actions: {
async fetchProducts() {
try {
const data = await axios.get("http://127.0.0.1:8000/products.json");
this.products = data.data;
} catch (error) {
alert(error);
console.log(error);
}
},
},
});

这是我的表组件，显示整个目录(这工作良好)

<template>
<div class="card">
<DataTable :value="products" dataKey="id" responsiveLayout="scroll" v-model:selection="selectedProducts"
:paginator="true" :rows="16"
paginatorTemplate="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
:rowsPerPageOptions="[16, 50, 100]" currentPageReportTemplate="Showing {first} to {last} of {totalRecords}"
scrollHeight="75vh" :resizableColumns="true" columnResizeMode="fit" showGridlines stripedRows stickyHeader="true">

<Column selectionMode="multiple" headerStyle="width: 3em"></Column>
<Column field="sku" header="SKU" style="width:10%" :sortable="true">
<template #body="slotProps">
<router-link :to="'/catalog/' + slotProps.data.id">{{ slotProps.data.sku }}</router-link>
</template>
</Column>
<Column field="name" header="Name" style="width:30%" :sortable="true"></Column>
<Column field="description" header="Description" style="width:30%"></Column>
<Column field="asin" header="ASIN" style="width:30%" :sortable="true"></Column>
<!-- <Column field="vendors" header="Vendors" style="width:30%" :sortable="true"></Column> -->
<Column field="brand" header="Brand" style="width:20%" :sortable="true"></Column>
<Column field="price" header="Price" style="width:20%" :sortable="true"></Column>
</DataTable>
</div>
</template>
<script setup>
import { ref, onMounted, computed } from "vue";
import { useProductsStore } from "../stores/products";
const store = useProductsStore();
const getProducts = computed(() => {
return store.getProducts;
});
const products = computed(() => {
return store.products;
});
onMounted(() => {
store.fetchProducts()
})
</script>

你可以看到我做了"sku"到一个路由器链接，该链接指向一个应该显示产品详细信息的页面。

这里是显示产品详细信息的组件

<template>
<div>
<h1>Product Details</h1>
<h1>{{ productDetails.name }}</h1>
<h2>{{ productDetails.sku }}</h2>
<h3>{{ productDetails.asin }}</h3>
<!-- <h3>{{ productDetails.price }}</h3> -->
<h3>{{ productDetails.description }}</h3>
</div>
</template>  
<script setup>
import { ref, onMounted, computed } from "vue";
import { useProductsStore } from "../stores/products";
const store = useProductsStore();
const products = computed(() => {
return store.products;
});
const getProductDetails = computed(() => {
return store.getProductDetails(ProductId);
});
const productDetails = computed(() => {
return products;
});
</script>

这是我的路由器

import { createWebHistory, createRouter } from "vue-router";
import Dashboard from "../views/Dashboard.vue";
import Vendors from "../views/vendorPage.vue";
import Catalog from "../views/catalogTable.vue";
import addProduct from "../views/addProduct.vue";
import productDetail from "../views/productDetail.vue";
const routes = [
{ path: "/", name: "Dashboard", component: Dashboard },
{ path: "/vendors", name: "Vendors", component: Vendors },
{ path: "/catalog", name: "Catalog", component: Catalog },
{
path: "/catalog/:id",
name: "productDetail",
component: productDetail,
params: true,
},
{ path: "/add", name: "AddProduct", component: addProduct },
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;

Answer 1

由于您使用的是Composition API，因此您需要导入并使用可组合的而不是this.$route.params.id。

<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
console.log('current param id', route.params.id)
</script>

---

否则，由于您有/catalog/:id路由，您可能应该有一个页面，您确实可以获取特定的路由。
决定它是应该在Pinia中还是再次被取回取决于你的应用程序的具体情况，你想如何处理你的状态，以及其他问题。(也是一个基于观点的问题)

我想说的是，一开始保持简单，然后在需要改进的情况下进行迭代。

PS:我注意到你从JSON中获取它，我猜这是为了测试目的，你有一个真正的API与你的Django后端。