From 6c2242ad9237f7acda4680a40d456f921d7944b6 Mon Sep 17 00:00:00 2001
From: Andreas Zweili <andreas@zweili.ch>
Date: Wed, 5 May 2021 14:26:31 +0200
Subject: [PATCH] move products into the store

---
 .../src/App.vue                               | 31 +------------------
 .../src/pages/ProductsList.vue                | 24 +++++++-------
 .../src/store/modules/products/getters.js     |  5 +++
 .../src/store/modules/products/index.js       | 31 ++++++++++++++++++-
 4 files changed, 49 insertions(+), 42 deletions(-)
 create mode 100644 2021-05-05_vuex-11-a-challenge-starting-code/src/store/modules/products/getters.js

diff --git a/2021-05-05_vuex-11-a-challenge-starting-code/src/App.vue b/2021-05-05_vuex-11-a-challenge-starting-code/src/App.vue
index e2ccd99..8cae4db 100644
--- a/2021-05-05_vuex-11-a-challenge-starting-code/src/App.vue
+++ b/2021-05-05_vuex-11-a-challenge-starting-code/src/App.vue
@@ -13,41 +13,12 @@ export default {
   data() {
     return {
       isLoggedIn: false,
-      products: [
-        {
-          id: 'p1',
-          image:
-            'https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Books_HD_%288314929977%29.jpg/640px-Books_HD_%288314929977%29.jpg',
-          title: 'Book Collection',
-          description:
-            'A collection of must-read books. All-time classics included!',
-          price: 99.99,
-        },
-        {
-          id: 'p2',
-          image:
-            'https://upload.wikimedia.org/wikipedia/en/thumb/c/c9/Tent_at_High_Shelf_Camp_cropped.jpg/640px-Tent_at_High_Shelf_Camp_cropped.jpg',
-          title: 'Mountain Tent',
-          description: 'A tent for the ambitious outdoor tourist.',
-          price: 129.99,
-        },
-        {
-          id: 'p3',
-          image:
-            'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Good_Food_Display_-_NCI_Visuals_Online.jpg/640px-Good_Food_Display_-_NCI_Visuals_Online.jpg',
-          title: 'Food Box',
-          description:
-            'May be partially expired when it arrives but at least it is cheap!',
-          price: 6.99,
-        },
-      ],
       cart: { items: [], total: 0, qty: 0 },
     };
   },
   provide() {
     return {
       isLoggedIn: this.isLoggedIn,
-      products: this.products,
       cart: this.cart,
       addProductToCart: this.addProductToCart,
       removeProductFromCart: this.removeProductFromCart,
@@ -108,4 +79,4 @@ html {
 body {
   margin: 0;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/2021-05-05_vuex-11-a-challenge-starting-code/src/pages/ProductsList.vue b/2021-05-05_vuex-11-a-challenge-starting-code/src/pages/ProductsList.vue
index 7b89581..4272e6a 100644
--- a/2021-05-05_vuex-11-a-challenge-starting-code/src/pages/ProductsList.vue
+++ b/2021-05-05_vuex-11-a-challenge-starting-code/src/pages/ProductsList.vue
@@ -16,20 +16,22 @@
 
 <script>
 import ProductItem from '../components/products/ProductItem.vue';
-
+import { mapGetters } from 'vuex';
 export default {
-  inject: ['products'],
-  components: {
-    ProductItem,
+  computed: {
+    ...mapGetters('products', ['products'])
   },
+  components: {
+    ProductItem
+  }
 };
 </script>
 
 <style scoped>
-  ul {
-    list-style: none;
-    margin: 2rem auto;
-    padding: 0;
-    max-width: 40rem;
-  }
-</style>
\ No newline at end of file
+ul {
+  list-style: none;
+  margin: 2rem auto;
+  padding: 0;
+  max-width: 40rem;
+}
+</style>
diff --git a/2021-05-05_vuex-11-a-challenge-starting-code/src/store/modules/products/getters.js b/2021-05-05_vuex-11-a-challenge-starting-code/src/store/modules/products/getters.js
new file mode 100644
index 0000000..49205de
--- /dev/null
+++ b/2021-05-05_vuex-11-a-challenge-starting-code/src/store/modules/products/getters.js
@@ -0,0 +1,5 @@
+export default {
+  products(state) {
+    return state.products;
+  }
+};
diff --git a/2021-05-05_vuex-11-a-challenge-starting-code/src/store/modules/products/index.js b/2021-05-05_vuex-11-a-challenge-starting-code/src/store/modules/products/index.js
index 830d8ad..b3c2a58 100644
--- a/2021-05-05_vuex-11-a-challenge-starting-code/src/store/modules/products/index.js
+++ b/2021-05-05_vuex-11-a-challenge-starting-code/src/store/modules/products/index.js
@@ -1,11 +1,40 @@
 //import counterActions from './actions.js';
-//import counterGetters from './getters.js';
+import productGetters from './getters.js';
 //import counterMutations from './mutations.js';
 
 export default {
   namespaced: true,
   state() {
     return {
+      products: [
+        {
+          id: 'p1',
+          image:
+            'https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Books_HD_%288314929977%29.jpg/640px-Books_HD_%288314929977%29.jpg',
+          title: 'Book Collection',
+          description:
+            'A collection of must-read books. All-time classics included!',
+          price: 99.99
+        },
+        {
+          id: 'p2',
+          image:
+            'https://upload.wikimedia.org/wikipedia/en/thumb/c/c9/Tent_at_High_Shelf_Camp_cropped.jpg/640px-Tent_at_High_Shelf_Camp_cropped.jpg',
+          title: 'Mountain Tent',
+          description: 'A tent for the ambitious outdoor tourist.',
+          price: 129.99
+        },
+        {
+          id: 'p3',
+          image:
+            'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Good_Food_Display_-_NCI_Visuals_Online.jpg/640px-Good_Food_Display_-_NCI_Visuals_Online.jpg',
+          title: 'Food Box',
+          description:
+            'May be partially expired when it arrives but at least it is cheap!',
+          price: 6.99
+        }
+      ]
     };
   },
+  getters: productGetters
 };