Adding product information to the store

With our basket array ready to receive data, we can now create a mutation to add the product object. Open the ProductPage.js file and update the addToBasket method to call a $store commit function, instead of the alert we put in place.

All of the information we require for products to be added to the basket is stored on the ProductPage component—so we can pass the component instance through to the commit() function using the this keyword.  This will become clear when we build the mutation.

Add the function call to the ProductPage method:

methods: {
  ...

  addToBasket() {
    this.$store.commit('addToBasket', this);
  }
}

Creating the store mutation to add products to the basket

Navigate to the Vuex store and create a new mutation titled addToBasket. This will accept the state as the first parameter and the component instance as the second. Passing the instance through allows us to access the variables, methods, and computed values on the component:

mutations...