Vuex Tutorial: Learn State management in Vue.js using Vuex

The objective of this Vuex tutorial is to give you an essential understanding of state management in Vue.js using Vuex by creating a relatable example. By the end of this tutorial, I hope you have a better understanding of the state management using Vuex!

Vuex is the official state management library for Vue.js. Its job is to share data across the components of your application. The basic concept is derived from React’s Redux and Flux library.

Here is the video Tutorial of Vuex:

In this above video, I have used Vue.js 2 and Vuex 3. Now, the current stable version of Vue.js v3.x and Vuex v4.

And this video example also works with the current stable version (Vue 3 & Vuex 4) as well, you just need to make small following changes.

In the store.js file, we need to create a store by first importing createStore from vuex and initialize it as in the following code.

import { createStore } from "vuex";

const store = createStore({
   state:{
      name: "Vue"
   }
});

export default store;

Now, in the app's main.js, we need to import our store.js and use it with Vue instance, as in the following code.

import { createApp } from 'vue'
import App from './App.vue'
import store from "./store/store"


const app = createApp(App)
app.use(store)
app.mount('#app')

Learn Vuex with a simple eCommerce store tutorial:

1. Project Setup

2. Vuex Setup & demo API introduction

3. Fetch products from API | Vuex State, Actions, & Mutations 

4. Add product to cart | Vuex Getters

5. Remove a product from the cart

6. mapState, mapGetters, mapActions in Vuex 

7. A smart way to use API

8. Vuex modules & namespace

9. Notification Component