1. Create a new JavaScript file named cart for managing the pages that will make use of the shopping cart.

2. Add the following to the top of the file:

    "use strict";
    
    class SaleItem {
        constructor(product, quantityPurchased) {
            this.product = product;
            this.quantityPurchased = quantityPurchased;
            this.salePrice = product.listPrice;
        }
    }
    
    class Sale {
        constructor(customer, items) {
            this.customer = customer;
            this.items = items;
        }
    }

   These are the JavaScript equivalents of the Sale and SaleItem domain classes. These will be used to generate JSON that is compatible with the Java versions.

3. Add code below the code you added in the previous step that creates a Vue app:

   ```javascript const app = Vue.createApp({

   data() {
       return {
           // models (comma separated key/value pairs)
   
       };
   },
   
      computed: Vuex.mapState({
       product: 'selectedProduct',
       items: 'items',
       customer: 'customer'
   }),

    mounted() {
        // semicolon separated statements

    },

methods: { // comma separated function declarations
}
});
/ other component imports go here /

// import data store
import { dataStore } from './data-store.js'
app.use(dataStore);    

// mount the page - this needs to be the last line in the file app.mount("#content"); ```

This is the same template that you have seen before, except that there is an additional block --- the `computed` object contains computed models.  Models in the `data` block are just values.  Models in the `computed` block are usually attached to a function that generates the value for the model.  We can use `computed` models to get data back out of the session storage via the Vuex `mapState` function as shown.

The key is the name of the model --- you use this in your HTML templates.  The value is the name of the equivalent state field in the data store.