Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<template>
<main>
<h1>Cart Content</h1>
<p>Total Number of Items: {{totalNumberOfCartItems}}</p>
<form @submit.prevent="addItemToCart">
<input type="text" v-model="item" required>
<button type="submit">Add to cart</button>
</form>
<button type="button" @click="checkout">Checkout</button>
</main>
</template>
<script>
export default {
data() {
return {
item: ''
}
},
computed: {
totalNumberOfCartItems() {
// Accessing the Vuex state
return this.$store.getters.totalNumberOfCartItems;
}
},
methods: {
addItemToCart() {
// Check that the input field isn't empty
if(this.item !== '') {
// commiting the additemtocart mutation with the payload
this.$store.commit('addItemToCart', this.item)
}
},
checkout() {
// Make sure cart is not empty
if(this.totalNumberOfCartItems > 0 ) {
// create request
let requestPayload = { cart: this.$store.state.cart };
// Dispatch the action
this.$store.dispatch('checkout', requestPayload);
}
else {
alert('Cart is empty');
}
}
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment