**Course Title:** Mastering Vue.js: Building Modern Web Applications **Section Title:** State Management with Vuex **Topic:** Integrate Vuex into an application to manage global state for a shopping cart feature.(Lab topic) **Overview** In this lab, we will explore how to integrate Vuex into a Vue.js application to manage global state for a shopping cart feature. We will create a simple shopping cart application that allows users to add and remove items from the cart. We will use Vuex to manage the global state of the cart, keeping track of the items added to the cart and the total cost. **Step 1: Create a new Vuex store** To start, create a new Vuex store in your Vue.js application. In the `src` directory, create a new file called `store.js`. In this file, we will create a new Vuex store and define the state, mutations, and actions for our shopping cart. ```javascript // src/store.js import Vuex from 'vuex' const store = new Vuex.Store({ state: { cart: [] }, mutations: { addItem(state, item) { state.cart.push(item) }, removeItem(state, index) { state.cart.splice(index, 1) } }, actions: { addToCart({ commit }, item) { commit('addItem', item) }, removeFromCart({ commit }, index) { commit('removeItem', index) } } }) export default store ``` In this code, we have created a new Vuex store with a state that has a `cart` property. We have also defined two mutations: `addItem` and `removeItem`, which modify the state of the cart. Additionally, we have defined two actions: `addToCart` and `removeFromCart`, which commit the corresponding mutations. **Step 2: Connect the Vuex store to the Vue application** To connect the Vuex store to our Vue application, we need to register it in the main application file. ```javascript // src/main.js import Vue from 'vue' import App from './App.vue' import store from './store' Vue.config.productionTip = false new Vue({ render: h => h(App), store // Add the Vuex store to the Vue application }).$mount('#app') ``` **Step 3: Create a shopping cart component** Next, create a new Vue component that will display the shopping cart. In the `src/components` directory, create a new file called `ShoppingCart.vue`. ```vue // src/components/ShoppingCart.vue <template> <div> <h1>Shopping Cart</h1> <ul> <li v-for="(item, index) in cart" :key="index"> {{ item.name }} ({{ item.price }}) <button @click="$store.dispatch('removeFromCart', index)">Remove</button> </li> </ul> <p>Total: {{ total }}</p> </div> </template> <script> export default { computed: { cart() { return this.$store.state.cart }, total() { return this.$store.state.cart.reduce((total, item) => total + item.price, 0) } } } </script> ``` In this code, we have created a new Vue component that displays the shopping cart. We use the Vuex store to retrieve the cart items and calculate the total cost. **Step 4: Create a product component** Next, create a new Vue component that will display a product. In the `src/components` directory, create a new file called `Product.vue`. ```vue // src/components/Product.vue <template> <div> <h1>{{ name }}</h1> <p>Price: {{ price }}</p> <button @click="$store.dispatch('addToCart', product)">Add to Cart</button> </div> </template> <script> export default { props: { name: String, price: Number }, computed: { product() { return { name: this.name, price: this.price } } } } </script> ``` In this code, we have created a new Vue component that displays a product. We use the Vuex store to add the product to the cart. **Conclusion** In this lab, we have integrated Vuex into a Vue.js application to manage global state for a shopping cart feature. We have created a Vuex store with state, mutations, and actions to manage the cart. We have also created Vue components to display the shopping cart and products. With this setup, we can easily manage the global state of our application and keep track of the items in the cart. **What's next?** In the next topic, we will learn about Axios for HTTP requests. We will see how to use Axios to fetch data from an API and integrate it with our Vue.js application. **External resources:** * Vuex documentation: <https://vuex.vuejs.org/> * Vue.js documentation: <https://vuejs.org/> **Leave a comment or ask for help:** If you have any questions or need help with this topic, please leave a comment below.