Vuex është një state bibliotekë menaxhimi për Vue.js aplikacione, që ju lejon të menaxhoni dhe sinkronizoni të dhënat në component s të ndryshme në aplikacionin tuaj. Vuex implementon arkitekturën Flux, duke e bërë të lehtë dhe efikase menaxhimin e aplikacionit state.
Konceptet kryesore në Vuex përfshijnë
1. State
In përfaqëson ruajtjen e centralizuar të të dhënave për aplikacionin tuaj state. Vuex Ai mban të dhënat e aplikacionit që duhet të ndahen midis component s të ndryshëm. Këtu është një shembull i përcaktimit të një state në Vuex:
2. Mutations
Mutations janë përgjegjës për modifikimin e state në Vuex. Ato janë funksione sinkrone që marrin rrymën state dhe ngarkesën si argumente. Këtu është një shembull i përcaktimit të një mutacioni në Vuex:
3. Actions
Actions përdoren për të trajtuar operacionet asinkrone dhe dërgimin mutations për të modifikuar state. Ato mund të përmbajnë thirrje API, detyra asinkronike ose logjikë komplekse. Këtu është një shembull i përcaktimit të një veprimi në Vuex:
4. Getters
Getters ju lejojnë të merrni dhe llogaritni që rrjedhin state nga Vuex dyqani. Ato janë të dobishme për qasjen dhe manipulimin e të dhënave përpara se t'i kthejnë ato në component s. Këtu është një shembull i përcaktimit të një marrësi në Vuex:
Për të instaluar Vuex në Vue.js projektin tuaj, mund të ndiqni këto hapa
Hapi 1: Instaloni Vuex përmes npm ose fijeve:
ose
Hapi 2: Krijoni një store.js
skedar në direktorinë rrënjë të projektit tuaj. Këtu do të deklarojmë dhe menaxhojmë aplikacionin state.
Hapi 3: Në store.js
skedar, importoni Vuex dhe krijoni një objekt të ri dyqani:
Hapi 4: Në main.js
skedar, importoni dyqanin dhe lidheni atë me aplikacionin tuaj Vue:
Hapi 5: Tani e keni instaluar dhe konfiguruar Vuex në projektin tuaj. Ju mund të deklaroni state s-të tuaja, getters, mutations, dhe actions në store.js
skedar dhe t'i përdorni ato në Vue component s.
Shembull:
Në store.js
skedar, mund të deklaroni një state mutacion të thjeshtë dhe si ky:
Në një Vue component, ju mund të përdorni state mutacionin dhe duke përdorur funksionet dhe : mapState
mapMutations
Me këto hapa, ju e keni instaluar me sukses Vuex dhe mund ta përdorni për të menaxhuar aplikacionin state tuaj Vue.js.
Me Vuex, ju mund të menaxhoni lehtësisht dhe vazhdimisht aplikacionin state. Ai rrit mirëmbajtjen dhe ripërdorimin e kodit, ndërkohë që ofron një qasje të strukturuar për menaxhimin e të dhënave.