Exercise 4 | 20 mins

Step 1

In the CartWidget component, use a getter from the cart store to display the total number of items in the cart. It is currently a div with a hard coded 10.

<aside> 💡 Hint: Remember that each item in the items state is an object with an id referencing the product and a count to track the quantity added.

[
	{"id":"298ef0b2-3e2e-483c-87a7-ddfdf64d63d5","count":2},
	{"id":"01ab693c-88ec-4bc5-b114-f519a6bfc033","count":4}
]

</aside>

✅ When complete the red counter bubble will display the accurate count

Screen Shot 2022-06-02 at 2.37.26 PM.png

Step 2

Create another getter named isEmpty, then use that getter to conditionally show a cart is empty message.

<aside> 💡 Hint: An empty cart message is commented out on line 42 of CartWidget.vue (you should just provide the logic)

</aside>

✅ When complete, the empty cart message will show when nothing has been added:

Screen Shot 2022-06-02 at 3.03.33 PM.png

Bonus!

Experiment with the different syntaxes for writing getters (arrow function vs no arrow function) and if you’re into TypeScript definitely take note of the differences.