 In this tutorial, you will learn how to perform state management in Vue 3 applications using the new version of Vue's standard state management library, Vuex.
TL;DR: Shared data/state amongst components in front-end applications can give rise to a lot of bugs in your applications. This is why state management is so important in modern front-end applications. 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. Several state management libraries have been developed 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 how to perform state management in Vue 3 applications using the new version of Vue's standard state management library, Vuex.
What We'll Build
In this tutorial, you will be implementing state management in a shopping cart built with Vue 3. You will begin with a pre-built e-commerce application that sells different types of wares. However, this application is not yet complete, as its shopping features for adding products to the cart and managing cart items have not been implemented. Using the Vuex state management library, you will be adding the following features to the application:
- Load the products from a central state store
- Add items to the shopping cart
- Display 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
Top comments (0)