9. Working with Vuex – State, Getters, Actions, and Mutations

Activity 9.01: Creating a Simple Shopping Cart and Price Calculator

Solution:

Perform the following steps to complete the activity:

Note

To access the code files for this activity, refer to https://packt.live/2KpvBvQ.

1. Create a new Vue application with Vuex support via the CLI.
2. Add the products and empty cart to the store located in store/index.js. Note that the product names and prices are arbitrary:

     state: {
       products: [
         { name: "Widgets", price: 10 },
         { name: "Doodads", price: 8 },
         { name: "Roundtuits", price: 12 },
         { name: "Fluff", price: 4 },
         { name: "Goobers", price: 7 }
       ],
       cart...