🧩 State Management in Vue 2 Applications

📚 In this tutorial, you will learn and demonstrate how to perform state management in Vue 2 applications using Vue's standard state management library, Vuex.

TL;DR: In today's world of front-end applications and their component-based architectures, components will most often need to share data amongst themselves to be displayed or used to achieve certain functionality. Keeping data synced and up-to-date amongst components in a modern front-end application can quickly become a tedious and frustrating task if not tackled using a battle-tested strategy. This has led to the development of quite a several state management libraries with certain frameworks having a de-facto state management library that they naturally work well with (e.g. Redux for Reactjs). In this tutorial, you will learn and demonstrate how to perform state management in Vue 2 applications using Vue's standard state management library, Vuex.

What We Are Going to Build

In this tutorial, you will be implementing state management in a shopping cart built with Vue 2. You will begin with an already built e-commerce application that sells different types of wares; however, this application is yet to be complete as its shopping features for adding products to the cart, and managing cart items are not implemented yet. Using the Vuex state management library, you will be adding the following features to the application:

• Loading the products from a central state store
• Adding items to the shopping cart
• Displaying items added to the shopping cart
• Calculate the total price of items in the cart
• Increase and decrease the quantity of the items in the cart
• Remove items from the cart

Prerequisites

To follow along with this exercise, there is a couple of setup/knowledge required:

• Node.js installed on your system. You can visit the website and install a suitable version for your operating system here.
• Vue CLI installed on your system. You can install this by running the command: npm install -g @vue/cli
• Basic knowledge of Vue and using Vue components.

With all these in place, you can proceed with the exercise.

Read more...