前面改用 Router 來完成導頁到商品詳情頁，因此資料需要另外在商品詳情頁取得，我們將取得資料服務的邏輯分
離出來，利用 service 來處理資料
在 src 底下新增 services 資料夾，並在資料夾中加入 productService.js 檔案

import products from '@/assets/data/product';
export default {
get(id) {
if (id) {
return products.find(product => product.id === Number(id));
}
return products;
},
};

由於資料來源改由 local 的 json 取得，需要另外再新增一個 local json 存放位置，在 src/assets 底下新增 data 資料夾，並加入 product.json 檔案

[
{
"id": 1,
"name": "Car",
"imgUrl": "https://images.pexels.com/photos/1200458/pexels-photo-1200458.jpeg?
auto=compress&cs=tinysrgb&h=350",
"desc": "A luxury car you won't miss it.",
"price": 199.99
},
{
"id": 2,
"name": "Bike",
"imgUrl": "https://images.pexels.com/photos/1239460/pexels-photo-1239460.jpeg?
auto=compress&cs=tinysrgb&h=350",
"desc": "A durable bike you've never ride.",
"price": 25.00
}
]

再來修改 ProductInfo.vue，並移除原有透過 props 的相關設置，資料取得需要在 created處理

<script>
import productService from '@/services/product-service';
export default {
name: 'ProductInfo',
data() {
return {
product: {},
quantity: 0,
};
},
created() {
this.product = productService.get(this.$route.params.id);
},
computed: {
amount() {
return this.product.price * this.quantity;
},
},
methods: {
onBackClick() {
this.$router.back();
},
},
};
</script>

因為已經透過 service 來處理資料，商品列表頁也可以使用 ProductService 來取得商品列表
修改 ProductList.vue

<script>
import productService from '@/services/product-service';
export default {
name: 'ProductList',
data() {
return {
products: [],
};
},
created() {
this.products = productService.get();
},
methods: {
onProductClick(product) {
this.$router.push({ name: 'productInfo', params: { id: product.id } });
},
},
};
</script>