Exercise 3 | 20 mins

Step 1

• In the products store, set the initial products data to an empty array with the type Product[]

  • Import the Product type from '@/types' and use the as keyword to set the empty array to an array of that type. Example:

    import type { Product } from '@/types'
    
    //..
    products: [] as Product[]
    

• Create a fill action to fill the product store with it’s initial data.

<aside> 💡 Hint: You can simulate a REST API by moving the products.json file from the src/data directory to the public directory, then using fetch to make an async request like this: await fetch('/products.json').

</aside>

<aside> 💡 Hint: Don’t forget to parse the returned data using json()

</aside>

• Call the fill action in App.vue

When this is done correctly you will get a very brief empty page under the header and then the products will display.

Step 2

• Set the initial cart data to an empty array so that we’re no longer working with dummy data

  • Import the CartItem type from '@/types' and use the as keyword to set the empty array to an array of that type. Example:

    import type { CartItem } from '@/types'
    
    //..
    items: [] as CartItem[]
    

• Create an addItem action that accepts (itemId: string, count: number) as parameters.

• This new action should check if the item already exists in the items array in the state.

  • If it exists, add the count received by the action to the existing item's count property in the state.

    <aside> 💡 Hint 2: Each item in the cart should be an object with an id referencing the object in the store and a count for storing how many have been added:

    {"id":"298ef0b2-3e2e-483c-87a7-ddfdf64d63d5","count":2}
    

    </aside>

  • If the item doesn't exist in the items state, add the new item object to the items array.

• In App.vue, the ProductCard component already emits the addToCart event with the payload containing the number of items to add.

  • Listen for the emitted event on the ProductCard component and trigger the CartStore's addItem action, passing the necessary arguments.

When this is done correctly you’ll be able to see the items you’ve added in the cart (though the red alert bubble will not yet be accurate).

Bonus

Add a loading indicator until the ProductsStore is filled.