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() {
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>
</style>

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

@ -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>
ul {
list-style: none;
margin: 2rem auto;
padding: 0;
max-width: 40rem;
}
</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 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
};