Nebucatnetzer
/
vuejs_course
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

move products into the store

This commit is contained in:
Andreas Zweili 2021-05-05 14:26:31 +02:00
parent 9f67d9339e
commit 6c2242ad92
4 changed files with 49 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
2021-05-05_vuex-11-a-challenge-starting-code/src/App.vue
View File

@ -13,41 +13,12 @@ export default {
data() { data() {
return { return {
isLoggedIn: false, 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 }, cart: { items: [], total: 0, qty: 0 },
}; };
}, },
provide() { provide() {
return { return {
isLoggedIn: this.isLoggedIn, isLoggedIn: this.isLoggedIn,
products: this.products,
cart: this.cart, cart: this.cart,
addProductToCart: this.addProductToCart, addProductToCart: this.addProductToCart,
removeProductFromCart: this.removeProductFromCart, removeProductFromCart: this.removeProductFromCart,
@ -108,4 +79,4 @@ html {
body { body {
margin: 0; margin: 0;
} }
</style> </style>

24
2021-05-05_vuex-11-a-challenge-starting-code/src/pages/ProductsList.vue
View File

@ -16,20 +16,22 @@
<script> <script>
import ProductItem from '../components/products/ProductItem.vue'; import ProductItem from '../components/products/ProductItem.vue';
import { mapGetters } from 'vuex';
export default { export default {
inject: ['products'], computed: {
components: { ...mapGetters('products', ['products'])
ProductItem,
}, },
components: {
ProductItem
}
}; };
</script> </script>
<style scoped> <style scoped>
ul { ul {
list-style: none; list-style: none;
margin: 2rem auto; margin: 2rem auto;
padding: 0; padding: 0;
max-width: 40rem; max-width: 40rem;
} }
</style> </style>

5
2021-05-05_vuex-11-a-challenge-starting-code/src/store/modules/products/getters.js Normal file
View File

@ -0,0 +1,5 @@
export default {
products(state) {
return state.products;
}
};

31
2021-05-05_vuex-11-a-challenge-starting-code/src/store/modules/products/index.js
View File

@ -1,11 +1,40 @@
//import counterActions from './actions.js'; //import counterActions from './actions.js';
//import counterGetters from './getters.js'; import productGetters from './getters.js';
//import counterMutations from './mutations.js'; //import counterMutations from './mutations.js';
export default { export default {
namespaced: true, namespaced: true,
state() { state() {
return { 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
}; };