Vuex je state biblioteka za upravljanje Vue.js aplikacijama, koja vam omogućuje upravljanje i sinkronizaciju podataka u različitim component s u vašoj aplikaciji. Vuex implementira Flux arhitekturu, što olakšava i učinkovito upravljanje aplikacijom state.
Ključni pojmovi u Vuex uključuju
1. State
Ulaz predstavlja centraliziranu pohranu podataka za vašu aplikaciju state. Vuex Sadrži podatke aplikacije koje treba dijeliti između različitih component s. Evo primjera definiranja state u Vuex:
2. Mutations
Mutations odgovorni su za izmjenu state u Vuex. To su sinkrone funkcije koje uzimaju struju state i korisni teret kao argumente. Evo primjera definiranja mutacije u Vuex:
3. Actions
Actions koriste se za rukovanje asinkronim operacijama i otpremom mutations za izmjenu state. Mogu sadržavati API pozive, asinkrone zadatke ili složenu logiku. Evo primjera definiranja radnje u Vuex:
4. Getters
Getters omogućuju vam dohvaćanje i izračunavanje izvedenih state iz Vuex trgovine. Korisni su za pristup i manipuliranje podacima prije nego što ih vrate u component s. Evo primjera definiranja gettera u Vuex:
Da biste instalirali Vuex u svoj Vue.js projekt, možete slijediti ove korake
Korak 1: Instalirajte Vuex putem npm-a ili yarn-a:
ili
Korak 2: Stvorite store.js
datoteku u korijenskom direktoriju svog projekta. Ovdje ćemo deklarirati i upravljati aplikacijom state.
Korak 3: U store.js
datoteku uvezite Vuex i stvorite novi objekt trgovine:
Korak 4: U main.js
datoteku uvezite trgovinu i povežite je sa svojom Vue aplikacijom:
Korak 5: Sada ste instalirali i postavili Vuex svoj projekt. Možete deklarirati svoje state s, getters, mutations i actions u store.js
datoteci i koristiti ih u svojim Vue component s.
Primjer:
U store.js
datoteci možete deklarirati jednostavnu state i mutaciju ovako:
U Vueu component možete koristiti state mutaciju i pomoću funkcija i : mapState
mapMutations
Ovim ste koracima uspješno instalirali Vuex i možete ga koristiti za upravljanje state svojom Vue.js aplikacijom.
Pomoću Vuex, možete jednostavno i dosljedno upravljati aplikacijom state. Poboljšava mogućnost održavanja i ponovne upotrebe koda, dok pruža strukturirani pristup upravljanju podacima.