product lines + product details work

Author: Laoujin

cli-socks/src/components/Product.vue

@@ -68,7 +68,12 @@ import ProductReview from './ProductReview.vue';
 export default class Product extends Vue {
   @Prop({default: false}) private premium!: boolean;
   @Prop() private cartLength!: number;
-  @Prop() private product!: any;
+
+  get product(): any {
+    const prodName = this.$route.params.id;
+    console.log('prodName', prodName);
+    return this.$store.state.products.find((x: any) => x.id === prodName);
+  }
 
   selectedVariantIndex = 0;
 

cli-socks/src/components/ProductLine.vue

@@ -1,6 +1,6 @@
 <template>
     <div>{{product.name}}
-        <router-link :to="{ name: 'product', params: { id: product.name }}">Link</router-link>
+        <router-link :to="{ name: 'product', params: { id: product.id }}">Link</router-link>
     </div>
 </template>
 

cli-socks/src/store.ts

@@ -5,6 +5,7 @@ Vue.use(Vuex);
 
 
 const productList = [{
+  id: 1,
   name: "Vue Socks",
   brand: "Vue",
   price: 5,
@@ -15,6 +16,7 @@ const productList = [{
   reviews: []
 },
 {
+  id: 2,
   name: "Angular Socks",
   brand: "Angular",
   price: 15,
@@ -25,6 +27,7 @@ const productList = [{
   reviews: []
 },
 {
+  id: 3,
   name: "npm Socks",
   brand: "npm",
   price: 3,
@@ -46,7 +49,7 @@ export default new Vuex.Store({
 
   },
   getters: {
-    
+
   },
 
   mutations: {