When the user selects a product by clicking the <

> button, they should be taken to another page that displays the product's details and asks the user how many they would like to add to the cart. This will required carrying the selected product through to a new page, so you will need to use the data store again.

1. Add a new field to the state section of data-store.js:

   // selected product
   selectedProduct: null;

2. Add another function to the mutations section:

   // user selects a product
   selectProduct(state, product) {
       state.selectedProduct = product;
   }

3. The functions in the mutations section are comma separated, so make sure to add a comma after previous function.

4. Now we need to make the <

   > button on the products page do something useful. Add the following function to the methods section of products-list.js:

   buyProduct(product) {
       dataStore.commit("selectProduct", product);
       window.location = "quantity.html"
   }

   This first line stores the product in the data store, and the second redirects the browser to the "how many do you want to buy" page (adapt the file name to suit).

5. Import the data store module into the products-list.js (just like you did in the previous section).

6. Add a @click.prevent handler to the <

   > button that calls the buyProduct function. You will need to pass the product (from the v-for) as a parameter to this function since we need to identify the product that the user selected.

7. Reload and test. When you click the <

   > button for a product you should see that the product has been added to the Vuex object in the session storage.