Each time the user navigates to a new page, or reloads the same page, all state within JavaScript is lost. In order to preserve important state we need to store it somewhere. There are four options in modern web browsers:

• Cookies

• Locale storage --- a key-value store associated with the current web site.

• Session storage --- a key-value store associated with the current web site's session. This will generally be cleared out when the user explicitly signs out, or they close their last tab that references the web site. This is client-side storage, and should not be confused with server-side sessions.

• IndexedDB --- an object-oriented DBMS for large amounts of structured data.

Session storage is the obvious candidate for our purposes, so we will use that.

Vue has a state management module named Vuex. By itself, it doesn't help us a lot since it does not persistently store data by default, however we can add a plugin that does make this happen.

1. Create a new JavaScript file named data-store. Add the following to the file:

    export const dataStore = Vuex.createStore({
    
        state () {
            // signed in customer
            customer: null;
            
            // the shopping cart items
            items: null;
        },
    
        mutations: {
    
            // user signs in
            signIn(state, customer) {
                state.customer = customer;
                state.items = new Array();
            }
    
        },
    
        // add session storage persistence
        plugins: [window.createPersistedState({storage: window.sessionStorage})]
    
    });

   The state function is where we declare the state that we want to keep track of. This will automatically be stored in the session storage.

   The mutations object is where we declare the functions that modify the state. In this case we have a signIn function that will save the customer, and create an empty array to hold the shopping cart items.

2. In the customer.js file, add the following to the signIn function. It should go inside the axios then callback, just before the window.location is set. This will call the signIn function in the data store.

   dataStore.commit("signIn", this.customer);

   This is how you call a mutation --- you use the commit method and use the name of the mutation as the first parameter.

3. We need to import the data-store module into customer.js (this is similar to importing packages in Java). Add the following to the bottom of customer.js, just above the app.mount call:

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

4. Start the server (and H2 if you haven't already done so), and sign in. You can see the result in the developer tools under the Application tab --- look under Session Storage. You should see a key named vuex that contains the signed-in customer.

5. Select the vuex key. You should see an expandable version of the object at the bottom of the pane which you can drill into to see all of the details.

   You should also see an empty items array which is where the shopping cart items will be stored.