Learn Vuex in 30 minutes | Vuex tutorial | Vue.js State management tutorial
HTML-код
- Опубликовано: 29 июн 2024
- 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.
Vuex is an official state management library for Vue.js applications. It works as a centralized store for every component in the application. In this lesson, we will learn What is Vuex state management? Why we need Vuex for large-scale Vuejs application? And all the basic concepts of the Vuex store.
#VueJs #Vuex #VuexTutorial #Vue
𝐆𝐢𝐭𝐡𝐮𝐛 𝐑𝐞𝐩𝐨𝐬𝐢𝐭𝐨𝐫𝐲:
github.com/qirolab/vuex-tutor...
▶ 𝐋𝐞𝐚𝐫𝐧 𝐕𝐮𝐞𝐱 𝐰𝐢𝐭𝐡 𝐚 𝐛𝐚𝐬𝐢𝐜 𝐞𝐂𝐨𝐦𝐦𝐞𝐫𝐜𝐞 𝐬𝐭𝐨𝐫𝐞 𝐭𝐮𝐭𝐨𝐫𝐢𝐚𝐥:
🔗 • Vuex tutorial (Vue.js ...
▶ 𝐕𝐮𝐞.js 𝟐 𝐁𝐚𝐬𝐢𝐜𝐬 𝐁𝐞𝐠𝐢𝐧𝐧𝐞𝐫 𝐓𝐮𝐭𝐨𝐫𝐢𝐚𝐥
🔗 • Vue 2 Basics Beginner ...
▶ 𝐕𝐮𝐞.𝐣𝐬 𝟐 𝐂𝐨𝐦𝐩𝐨𝐧𝐞𝐧𝐭𝐬 𝐏𝐥𝐚𝐲𝐥𝐢𝐬𝐭:
🔗 • Vue.js 2 Components, B...
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
𝐃𝐢𝐠𝐢𝐭𝐚𝐥𝐎𝐜𝐞𝐚𝐧 𝐑𝐞𝐟𝐞𝐫𝐫𝐚𝐥
m.do.co/c/e740238537d0
Support my work:
1. On BuyMeACoffee: www.buymeacoffee.com/qirolab
2. On Patreon: / qirolab
Also, follow us on:
𝐅𝐚𝐜𝐞𝐛𝐨𝐨𝐤: qirolab
𝐓𝐰𝐢𝐭𝐭𝐞𝐫: / 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
Please consider yourself a hero. You are too much!!! You have dealt with state management in Vuejs decisively, congratulations.
Awesome tutorial! Easy and show what we need to know :) Thank you a loot!
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!
Thank You
stopped the video at 2:13 just to give it a like. already knew it was gonna be good!
Straight to the point very well done thank you
Straight to the point. Just what i needed.
The BEST as always!!
Bravo, your explanation is just awesome. Now i feel more confident about to use vuex. Thank you so much for being so awesome.
Amazing tutorial , thanks !
it was great to Vuex understanding
This tutorial helps me understand Vuex better, especially when you compare Vuex with normal Vue methods, thank you
Glad to hear that!
*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
wow
I am really grateful that i found this.
thank you for this.🙏
So glad!
Very clear! thank you!!
So glad!
Great tutorial, now I can start using state management in all my applications
👏
Thank you! Cheers!
Very useful video, Love it Thanks :)
Glad to hear that!
very NYC tutorial for Bigners
Very useful video! Thank you😊
You're welcome 😊
thank you very much.
very nice to share, love it
Thank you! Cheers!
So clear and easy to follow and understand. Thank you!
Glad to hear that
Very useful tutorial. Thanks for sharing it with us
Glad it was helpful!
If there is more than like, subscribe i would do that. It's totally outstanding among other vuex tutorial on RUclips! Thank You brother. Carry on pls
Awesome and Very nice explanation...
Thanks a lot
wow thank you so much
Glad you like it!
thank you for this tutorial
You're welcome 😊
insane. thanks sir.
You're welcome
Tnx
Great bro💕❤
Thank you so much 😀
Very good tutorial
Thank you! Cheers!
25:50 mapSpate, mapGetters, mapActions
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.
Sure, I will create tutorial on that also.
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.
Great to hear!
I followed your code to do my project, it showed me "todo. title" is undefined. do you know how to fix it.
Hello friend, what is the terminal where you work?
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:
ruclips.net/video/ANxLmiLXtFM/видео.html
I'm using Vue 3. Does the code in this tutorial series work with Vue 3?
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:
ruclips.net/video/FXsWed7Nc2o/видео.html
I also recommend you to watch the complete Vue 3 Tutorial series as well. Here is the playlist:
ruclips.net/p/PL1TrjkMQ8UbWg8f8EpkpZntxdQldkBipE
@@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
syntax-wise very good but you gotta improve in your teaching style. Do-as-I-do is not teaching.
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.
Why don't you start your own channel? I'm sure some of your frnds very excited abt this idea