Exercise 2 | 20 mins

• import the products data from @/data/products.json into the product store
• Set an initial products state on the store to the products from the JSON file
• Do the same for an items state on the CartStore using the data from @/data/cart.json
• In App.vue, instead of accessing the products directly from the products file (as in the boilerplate), change it out to access the products from the store
• Ensure you continue looping over the proper variable in the template to display the product cardsx
• In CartWidget.vue get the products from the product store and the cartItems from the cart store respectively, instead of from the data files (as in the boilerplate)

✅ When complete, you should be able to see all the products in the ProductStore state in the devtools. When you alter any of the products in the devtools, it should alter the output on the page.

You should see the same for the cart.

Bonus!

If you succeed using de-structuring the first time around, then try it without the de-structuring and vice-versa. Hint: Don’t forget to use storeToRefs.