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

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-tutorial-todos-example ▶ 𝐋𝐞𝐚𝐫𝐧 𝐕𝐮𝐞𝐱 𝐰𝐢𝐭𝐡 𝐚 𝐛𝐚𝐬𝐢𝐜 𝐞𝐂𝐨𝐦𝐦𝐞𝐫𝐜𝐞 𝐬𝐭𝐨𝐫𝐞 𝐭𝐮𝐭𝐨𝐫𝐢𝐚𝐥: 🔗 🤍🤍youtube.com/playlist?list=PL1TrjkMQ8UbVSDkDaLkjpeNGkblNU8rpW ▶ 𝐕𝐮𝐞.js 𝟐 𝐁𝐚𝐬𝐢𝐜𝐬 𝐁𝐞𝐠𝐢𝐧𝐧𝐞𝐫 𝐓𝐮𝐭𝐨𝐫𝐢𝐚𝐥 🔗 🤍🤍youtube.com/playlist?list=PL1TrjkMQ8UbUb6enU-ESsbngYBLbE_sG4 ▶ 𝐕𝐮𝐞.𝐣𝐬 𝟐 𝐂𝐨𝐦𝐩𝐨𝐧𝐞𝐧𝐭𝐬 𝐏𝐥𝐚𝐲𝐥𝐢𝐬𝐭: 🔗 🤍🤍youtube.com/playlist?list=PL1TrjkMQ8UbVu4dvX2gtyZQ0FxAsA48jB 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: 🤍🤍buymeacoffee.com/qirolab 2. On Patreon: 🤍🤍patreon.com/qirolab Also, follow us on: 𝐅𝐚𝐜𝐞𝐛𝐨𝐨𝐤: 🤍fb.com/qirolab 𝐓𝐰𝐢𝐭𝐭𝐞𝐫: 🤍twitter.com/qirolab