<template> <div class="cart"> <h2>Your Cart</h2> <p v-show="!products.length"><i>Please add some products to cart.</i></p> <ul> <li v-for="p in products"> {{ p.title }} - {{ p.price | currency }} x {{ p.quantity }} </li> </ul> <p>Total: {{ total | currency }}</p> <p><button :disabled="!products.length" @click="checkout(products)">Checkout</button></p> <p v-show="checkoutStatus">Checkout {{ checkoutStatus }}.</p> </div> </template> <script> import { checkout } from '../vuex/actions' import { cartProducts } from '../vuex/getters' export default { vuex: { state: { products: cartProducts, checkoutStatus: ({ cart }) => cart.lastCheckout }, actions: { checkout } }, computed: { total () { return this.products.reduce((total, p) => { return total + p.price * p.quantity }, 0) } } } </script>