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

Harish Kumar · · 4150 Views

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 

0

Please login or create new account to add your comment.

0 comments
You may also like:

Create SPA authentication Using Laravel Sanctum and Vue.js

In this guide, we will focus on SPA authentication in a simple Vue.js app using Laravel Sanctum. Laravel Sanctum provides a featherweight authentication system for SPAs (single (...)
Harish Kumar

What is Teleport Component in Vue.js 3?

Vue 3 provides the <teleport> component. Here in this post, I will show you how to use the <teleport> component in your Vue.js 3 project.
Razet

Multiple v-model Bindings in Vue 3

In this guide, I will explain the new v-model in Vue 3 and go through a new feature that permits you to utilize various v-model on the same component!
Razet

What is the difference Between watch and watchEffect in Vue.js 3?

There are a few cases where we may need to track a reactive property, and we can do this by utilizing a Vue watcher.
Harish Kumar

What is the difference between Ref() and Reactive() in Vue 3 Composition API?

The biggest feature of Vue 3 is the Composition API. This offers an elective way to deal with making components that is very different than the current options API.
Harish Kumar

Why Composition API in Vue 3, and Options API vs. Composition API?

Perhaps the greatest feature in Vue 3's release is Vue's new Composition API. As developers start creating more large-scale projects with Vue, the difficulties of code organization, (...)
Harish Kumar