Vuex er et state administrationsbibliotek til Vue.js applikationer, der giver dig mulighed for at administrere og synkronisere data på tværs af forskellige component s i din applikation. Vuex implementerer Flux-arkitekturen, hvilket gør det nemt og effektivt at administrere applikationen state.
Nøglebegreber i Vuex bl.a
1. State
Inden repræsenterer state det Vuex centraliserede datalager for din applikation. Den indeholder applikationens data, der skal deles mellem forskellige component s. Her er et eksempel på at definere en state i Vuex:
2. Mutations
Mutations er ansvarlige for at ændre state i Vuex. De er synkrone funktioner, der tager strømmen state og nyttelasten som argumenter. Her er et eksempel på at definere en mutation i Vuex:
3. Actions
Actions bruges til at håndtere asynkrone operationer og afsendelse mutations for at ændre state. De kan indeholde API-kald, asynkrone opgaver eller kompleks logik. Her er et eksempel på definition af en handling i Vuex:
4. Getters
Getters giver dig mulighed for at hente og beregne afledt state fra Vuex butikken. De er nyttige til at få adgang til og manipulere data, før de returneres til component s. Her er et eksempel på definition af en getter i Vuex:
For at installere Vuex i dit Vue.js projekt kan du følge disse trin
Trin 1: Installer Vuex via npm eller garn:
eller
Trin 2: Opret en store.js
fil i rodmappen på dit projekt. Det er her, vi vil erklære og administrere applikationen state.
Trin 3: store.js
Importer Vuex og opret et nyt butiksobjekt i filen:
Trin 4: main.js
Importer butikken i filen og link den til din Vue-applikation:
Trin 5: Nu har du installeret og sat op Vuex i dit projekt. Du kan erklære dine state s, getters, mutations og actions i store.js
filen og bruge dem i dine Vue component s.
Eksempel:
I store.js
filen kan du erklære en simpel state mutation som denne:
I en Vue component kan du bruge state og-mutationen ved at bruge funktionerne og : mapState
mapMutations
Med disse trin har du installeret Vuex og kan bruge den til at administrere state din Vue.js applikation.
Med Vuex kan du nemt og konsekvent administrere applikationen state. Det forbedrer kodevedligeholdelse og genbrugbarhed, samtidig med at det giver en struktureret tilgang til datahåndtering.