Als je op mij lijkt, toen je Vuex voor het eerst tegenkwam, vroeg je je waarschijnlijk af:"Hoe werkt dit in godsnaam?" Het is niet meteen duidelijk hoe dit soort statusbeheersystemen werken, vooral als je een SQL-achtergrond hebt. En heb ik het überhaupt nodig? In feite heeft de Vuex-documentatie een citaat dat het vrij goed samenvat:
Flux, Vuex, Mobx... waar gaan al deze "x"en over? Nou, op een gegeven moment werd de wazigheid van mijn gegevens te veel en realiseerde ik me dat ik een Vuex-bril nodig had. Dus ging ik naar de Vuex-site om te zien waar al het gedoe over ging.
Misschien ben ik het, misschien word ik gewoon oud, maar die site heeft niet goed uitgelegd hoe Vuex in godsnaam werkte. Het leek erg ingewikkeld en onhandig en ik wilde het echt niet gebruiken. Al die kernconcepten en applicatiestructuur en ugh.
Gelukkig ben ik me er meer in gaan verdiepen en ontdekte dat het toch niet zo ingewikkeld was. Ik moest het gewoon opsplitsen in een servetschets.
Tadá! Helder als modder!
Misschien moet ik dit wat meer opsplitsen.
Vuex is een manier om al je gegevens op één plek te bewaren
In wezen is dat alles wat Vuex is. Dit wordt het hebben van een "bron van waarheid" voor uw toepassing genoemd. Uw componenten zullen verbinding maken met Vuex om toegang te krijgen tot de gedeelde gegevens die daar aanwezig zijn. Maar hoe werkt dat precies?
Gegevens worden bewaard in de staat
De gegevens worden bewaard in de state van de Vuex-gegevensopslag. Uw component kan die gegevens lezen en, aangezien het reactief is, zichzelf bijwerken wanneer de gegevens in de status worden bijgewerkt. Elk onderdeel in de applicatie luistert naar dezelfde status, dus iedereen blijft synchroon lopen.
Gegevens worden gewijzigd via Mutaties
Nu de gegevens erin staan, kun je ze gewoon direct bijwerken, toch?
NEE.
Een van de belangrijke concepten van Vuex is dat je de state . niet moet veranderen direct. Het mag alleen worden gewijzigd via een mutation . Alle state veranderingen zullen plaatsvinden door mutaties. Altijd. Onthoud dat en het komt goed.
Mutaties moeten ook heel eenvoudig zijn, gegevens nemen en in de staat zetten en dat is alles. Alles met meer logica dan dat zal in actie komen, zoals je hierna zult zien.
Logische bewerkingen met betrekking tot de gegevens live in Acties
Soms zijn er logische bewerkingen die betrekking hebben op de gegevens, zoals een AJAX-aanroep die gegevens naar de toepassing haalt of een generator die nieuwe GUID's maakt. Dat zou niet in een specifiek onderdeel moeten leven, het is een gegevensbewerking, dus het zou bij de gegevens moeten zijn. Daar zijn de acties voor.
Alles wat lang zou duren, zou in een actie moeten leven. Acties werken de status nooit bij, maar ze kunnen mutaties oproepen die de status bijwerken.
Getters zijn voor algemene filters en formatters voor de gegevens
Getters worden net als berekende eigenschappen in Vue-componenten gebruikt, het is een manier om gefilterde of geformatteerde gegevens te hebben van de status waarmee elk onderdeel verbinding kan maken. In plaats van een berekende eigenschap in elke component te hebben, kunt u een nieuwe getter maken die componenten kunnen delen en die worden bijgewerkt wanneer de status wordt bijgewerkt.
Er is de vraag of je altijd getters moet gebruiken bij het openen van de staat die ik onlangs ook heb beantwoord. Kijk daar eens naar als je je dat ooit hebt afgevraagd.
Dus eigenlijk gewoon een andere manier om toegang te krijgen tot de status (maar nooit bijwerken!).
Hopelijk geeft dit je een betere greep op wat Vuex doet als je er eerder mee worstelde. Ik weet dat het me heeft geholpen.