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

QiroLab
QiroLab
53.8 هزار بار بازدید - 5 سال پیش - In this Vuex tutorial, I
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

𝐆𝐢𝐭𝐡𝐮𝐛 𝐑𝐞𝐩𝐨𝐬𝐢𝐭𝐨𝐫𝐲:
https://github.com/qirolab/vuex-tutor...

▶ 𝐋𝐞𝐚𝐫𝐧 𝐕𝐮𝐞𝐱 𝐰𝐢𝐭𝐡 𝐚 𝐛𝐚𝐬𝐢𝐜 𝐞𝐂𝐨𝐦𝐦𝐞𝐫𝐜𝐞 𝐬𝐭𝐨𝐫𝐞 𝐭𝐮𝐭𝐨𝐫𝐢𝐚𝐥:
🔗 Vuex tutorial (Vue.js state management)

▶ 𝐕𝐮𝐞.js 𝟐 𝐁𝐚𝐬𝐢𝐜𝐬 𝐁𝐞𝐠𝐢𝐧𝐧𝐞𝐫 𝐓𝐮𝐭𝐨𝐫𝐢𝐚𝐥
🔗 Vue 2 Basics Beginner Tutorial

▶ 𝐕𝐮𝐞.𝐣𝐬 𝟐 𝐂𝐨𝐦𝐩𝐨𝐧𝐞𝐧𝐭𝐬 𝐏𝐥𝐚𝐲𝐥𝐢𝐬𝐭:
🔗 Vue.js 2 Components, Beginners tutorial

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


𝐃𝐢𝐠𝐢𝐭𝐚𝐥𝐎𝐜𝐞𝐚𝐧 𝐑𝐞𝐟𝐞𝐫𝐫𝐚𝐥
https://m.do.co/c/e740238537d0

Support my work:
1. On BuyMeACoffee: https://www.buymeacoffee.com/qirolab
2. On Patreon: Patreon: qirolab


Also, follow us on:
𝐅𝐚𝐜𝐞𝐛𝐨𝐨𝐤: https://fb.com/qirolab
𝐓𝐰𝐢𝐭𝐭𝐞𝐫: Twitter: qirolab
5 سال پیش در تاریخ 1398/07/24 منتشر شده است.
53,851 بـار بازدید شده
... بیشتر