Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Building an E-Commerce Store - Adding a Checkout Chapter 11

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: {

products(state, payload) {

...

},

categories(state, payload) {

...

},

addToBasket(state, item) {

}

}