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

𝐆𝐢𝐭𝐡𝐮𝐛 𝐑𝐞𝐩𝐨𝐬𝐢𝐭𝐨𝐫𝐲:
[ Ссылка ]

▶ 𝐋𝐞𝐚𝐫𝐧 𝐕𝐮𝐞𝐱 𝐰𝐢𝐭𝐡 𝐚 𝐛𝐚𝐬𝐢𝐜 𝐞𝐂𝐨𝐦𝐦𝐞𝐫𝐜𝐞 𝐬𝐭𝐨𝐫𝐞 𝐭𝐮𝐭𝐨𝐫𝐢𝐚𝐥:
🔗 [ Ссылка ]

▶ 𝐕𝐮𝐞.js 𝟐 𝐁𝐚𝐬𝐢𝐜𝐬 𝐁𝐞𝐠𝐢𝐧𝐧𝐞𝐫 𝐓𝐮𝐭𝐨𝐫𝐢𝐚𝐥
🔗 [ Ссылка ]

▶ 𝐕𝐮𝐞.𝐣𝐬 𝟐 𝐂𝐨𝐦𝐩𝐨𝐧𝐞𝐧𝐭𝐬 𝐏𝐥𝐚𝐲𝐥𝐢𝐬𝐭:
🔗 [ Ссылка ]

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


𝐃𝐢𝐠𝐢𝐭𝐚𝐥𝐎𝐜𝐞𝐚𝐧 𝐑𝐞𝐟𝐞𝐫𝐫𝐚𝐥
[ Ссылка ]

Support my work:
1. On BuyMeACoffee: [ Ссылка ]
2. On Patreon: [ Ссылка ]


Also, follow us on:
𝐅𝐚𝐜𝐞𝐛𝐨𝐨𝐤: [ Ссылка ]
𝐓𝐰𝐢𝐭𝐭𝐞𝐫: [ Ссылка ]

свернуть