Learn Vuex in 30 minutes | Vuex tutorial | Vue.js State management tutorial

[@QiroLab]

In this Vuex tutorial, I have shown an example of a simple TODO app in Vue.js 2 and Vuex 3. This example also works with Vue3 and Vuex 4 as well. You just need to make few small following changes.
Timestamps:
00:00 Introduction
00:37 What is Vuex?
00:58 Why we need Vuex in the Vue.js project?
02:24 Compare with Vue.js 2 Options API instance and Vuex 3 Instance
Update:
In Vue.js 3 Option API
```
import { createApp } from 'vue'
createApp({
data() {},
methods: {},
computed: {},
})
app.mount('#app')
```
In Vuex 4:
```
import { createStore } from "vuex"
const store = createStore({
state:{},
getters: {},
mutations: {},
actions: {}
})
```
04:47 Create Vue.js App
05:41 Install Vuex Library
06:09 Create Vuex Store
Now here, to create Vuex 4 Store in Vue.js 3, replace it with this snippet:
```
import { createStore } from "vuex"
const store = createStore({
state:{},
getters: {},
mutations: {},
actions: {}
})
export default store
```
And in the `main.js` use this snippet:
```
import { createApp } from 'vue'
import App from './App.vue'
import store from "./store/store"
const app = createApp(App)
app.use(store)
app.mount('#app')
```
07:31 Create an Example of a simple TODO list

[@QiroLab]

*Don't get left behind! Download JavaScript: ES2015 to ES2023 - eBook and become a JavaScript pro!*
👉 qirolab.gumroad.com/l/javascript-from-es2015-to-es2023

[@JeffDZ40]

3:36 minutes in and i have to tell you that your comparison between the Vuejs and Vuex instances unlocked a new door for me. I'm excited to go through the playlist. Well done, my friend!

[@QiroLab]

Thank You

[@Mr.science007]

stopped the video at 2:13 just to give it a like. already knew it was gonna be good!

[@solaoladejo7421]

Please consider yourself a hero. You are too much!!! You have dealt with state management in Vuejs decisively, congratulations.

[@stojankukrika7242]

Awesome tutorial! Easy and show what we need to know :) Thank you a loot!

[@soga77]

Straight to the point very well done thank you

[@adam192021]

The BEST as always!!

[@sngari]

Straight to the point. Just what i needed.

[@anikkhan556]

Bravo, your explanation is just awesome. Now i feel more confident about to use vuex. Thank you so much for being so awesome.

[@Tubee1234]

This tutorial helps me understand Vuex better, especially when you compare Vuex with normal Vue methods, thank you

[@QiroLab]

Glad to hear that!

[@mehulsharma8608]

Very useful video, Love it Thanks :)

[@QiroLab]

Glad to hear that!

[@emmanuellangat7558]

Great tutorial, now I can start using state management in all my applications
👏

[@QiroLab]

Thank you! Cheers!

[@saikatjaman2004]

it was great to Vuex understanding

[@monikab9943]

Very useful video! Thank you😊

[@QiroLab]

You're welcome 😊

[@vikassharma5800]

wow
I am really grateful that i found this.
thank you for this.🙏

[@QiroLab]

So glad!

[@jonice4229]

Awesome, what do you think about a course on udemy or something from scratch by doing real example blog with dashboard? Have a nice day.

[@QiroLab]

Sure, I will create tutorial on that also.

[@omarimai7428]

Amazing tutorial , thanks !

[@xuexiazhou404]

I followed your code to do my project, it showed me "todo. title" is undefined. do you know how to fix it.

[@KamalKhan-bc8lz]

If there is more than like, subscribe i would do that. It's totally outstanding among other vuex tutorial on TH-cam! Thank You brother. Carry on pls

[@pimenvibritania8590]

Very clear! thank you!!

[@QiroLab]

So glad!

[@genesdada7045]

I don't know how much i can pay you for your great investment in helping us understand freely these knowledge, was kinda confused in transiting from vuex2 to 3.God bless u so much. Asante Sana.

[@QiroLab]

Great to hear!

[@tinaanit2965]

25:50 mapSpate, mapGetters, mapActions

[@NellyMoseki]

So clear and easy to follow and understand. Thank you!

[@QiroLab]

Glad to hear that

[@drkhan1983]

Awesome and Very nice explanation...

[@QiroLab]

Thanks a lot

[@UmarAshfaq1]

very NYC tutorial for Bigners

[@tampantapipemalu6448]

very nice to share, love it

[@QiroLab]

Thank you! Cheers!

[@bobbiechannel864]

thank you for this tutorial

[@QiroLab]

You're welcome 😊

[@teodordimitrov7062]

Very useful tutorial. Thanks for sharing it with us

[@QiroLab]

Glad it was helpful!

[@tinaanit2965]

Hello friend, what is the terminal where you work?

[@QiroLab]

I am using ZSH with oh-my-zsh on my terminal. I have already created a video on this. You should watch that video also:
th-cam.com/video/ANxLmiLXtFM/w-d-xo.html

[@NegarSarani-r6k]

wow thank you so much

[@QiroLab]

Glad you like it!

[@muhammadmudassirsiddiqui3030]

Great bro💕❤

[@QiroLab]

Thank you so much 😀

[@jumbo999614]

I'm using Vue 3. Does the code in this tutorial series work with Vue 3?

[@QiroLab]

Yes, this code is valid for Vue 3 as well. All the Vue2 code is valid in Vue 3, But there some deprecated syntax that you can learn in this video:
th-cam.com/video/FXsWed7Nc2o/w-d-xo.html
I also recommend you to watch the complete Vue 3 Tutorial series as well. Here is the playlist:
th-cam.com/play/PL1TrjkMQ8UbWg8f8EpkpZntxdQldkBipE.html

[@jumbo999614]

@@QiroLab Thank you for replying. I installed Vue extension for chrome. But when I inspect it, the vue tab shows only the elements of the page. There is no vuex tab. Why is that?
Right now I'm using Vue 3.0.0.0 with Vuex 4.0.0.0

[@kirindev]

thank you very much.

[@samuelhamonangan7185]

Very good tutorial

[@QiroLab]

Thank you! Cheers!

[@mahinhossain2317]

Tnx

[@kid_rz]

insane. thanks sir.

[@QiroLab]

You're welcome

[@shupesmerga4694]

syntax-wise very good but you gotta improve in your teaching style. Do-as-I-do is not teaching.

[@QiroLab]

Thank you for your feedback. I am working hard to improve my teaching style. Please watch my recent videos and give your feedback, how much I improved? Thank you.

[@NuhAleph]

Why don't you start your own channel? I'm sure some of your frnds very excited abt this idea