Pinia, det nye (og bedre) state management system til Vue

Har du endnu ikke hørt om Pinia, eller overvejer du at skifte fra Vuex til Pinia? Så kan denne artikel hjælpe dig.

Jeg vil forsøge at give dig en ordentlig introduktion til det nye state management system, Pinia til Vue. Hvorfor jeg synes det er et fantastisk værktøj, og hvorfor du bør bruge det allerede i dag.

Hvad er Pinia

Pinia er et nyt store/state management system til Vue. Det er et fantastisk værktøj, når du vil dele data mellem komponenter i din applikation. En af grundene til at bruge et værktøj som Pinia (eller Vuex for den sags skyld) er, at det hurtigt kan blive rodet og ustruktureret at sende events rundt og lytte efter dem i din applikation. State management systemer som Pinia (Vuex, Redux osv.) kan hjælpe med at løse dette.

Pinia er nu også det anbefalede valg fra Vue og er officielt en del af hele Vue-økosystemet, vedligeholdt og udviklet af kernemedlemmer i Vue-teamet. Sidst men ikke mindst er Pinia super letvægtigt - kun 1kb i størrelse, hvilket er helt fantastisk.

Hvorfor har vi brug for Pinia?

Hvis du har været i Vue-communityet, ved du, at det foretrukne valg har været Vuex, når det kommer til state management, og communityet har været glade for at bruge det. Så hvorfor har vi egentlig brug for Pinia? Ja... Vuex kan være... besværligt at arbejde med! Lad mig gå lidt dybere ind i hvorfor.

Dataflow

Dataflowet i Vuex kan være noget svært at forstå.

Bliver du overvældet af diagrammet? Det forstår jeg godt - Ved første øjekast kan det se noget kompliceret og skræmmende ud - Og når man begynder at arbejde med Vuex og principperne omkring Vuex, kan det tage noget tid virkelig at forstå, hvordan du ændrer state, bruger actions og mutations osv.

Meget opsætning

Vuex tager tid at sætte op! Det tager tid at skabe en god solid arkitektur, oprette moduler, opdele filer og sætte namespacing op - Moduler indeholder også ofte meget af den samme boilerplate-kode. En ting der virkelig er tidskrævende, er at få Vuex til at fungere ordentligt i et TypeScript-projekt. Du vil ofte finde dig selv i at skulle manuelt inferere typer over det hele - på din state, getters, mutations og actions. Et rigtigt besvær!

Afhængig af string-værdier! Usikkert!

Når du har defineret dine mutations og actions, finder du ofte dig selv i at sende string-værdier, når du vil kalde en action eller committe:

store.dispatch('utils/addBodyClass', 'some-class'); //action
store.commit('utils/setData', response); //mutation
store.getters['user/userId'] //getter

Som du kan se ovenfor, bruger vi string-værdier, hvilket er meget usikkert. Hvad hvis du har en tastefejl? Du får heller ikke intellisense/code completion ud af boksen, medmindre du manuelt har typet alle actions, mutations osv. Forstår du pointen? Det er meget udsat for manuelle fejl, som kan føre til bugs! Mange ville foreslå at bruge konstanter i stedet for at undgå dette, men det ville også være meget tidskrævende at sætte op.

Pinia fjerner besværet

Pinia løser mange af de ting, der er besværlige ved Vuex. Det har en meget simplere API, og hvis du har arbejdet med composables i Vue 3, vil Pinia føles meget velkendt. Det kræver langt mindre opsætning end Vuex, hvilket sparer dig tid! Pinia kommer også med førsteklasses TypeScript-support ud af boksen, hvilket er rigtig rart, og du får bedre code completion i dit IDE på grund af den måde, Pinia er bygget på!

Storens actions dispatches som almindelige funktionskald i stedet for at bruge dispatch/commit-metoden eller MapAction/MapMutation-hjælpefunktioner, som er normalt i Vuex. Det betyder også, at når du kalder en action, behøver du ikke stole på at sende string-værdier som i Vuex! En kæmpe gevinst!

Udover at det er nemmere at sætte op, vil dit IDE også give dig meget bedre autocompletion og support for TypeScript - Det dykker vi ned i senere:

I Vuex har du kun 1 store - Hvis du har brug for bedre adskillelse og mere struktur, skal du oprette Vuex-moduler. I Pinia har du flere stores. Det betyder også, at du ikke behøver at sætte en index.ts-fil op og importere alle moduler for at kunne bruge dem, som i Vuex. I Pinia importerer du bare din store i din fil, som vist på skærmbilledet ovenfor:

Ligesom Vuex integrerer Pinia også rigtig godt med Vue Devtools, så du kan udnytte alle funktioner, som du gjorde med Vuex - Ikke den største forskel på det område.

Som jeg også nævnte tidligere: Hvis du har arbejdet med Vue composables, bør Pinia-syntaksen føles meget velkendt - Se selv herunder:

Jeg synes virkelig, at Pinia er et skridt i den rigtige retning sammenlignet med Vuex. Det løser virkelig mange af de "problemer", man tidligere har haft med Vuex. Jeg glæder mig til at følge de næste udgivelser af Pinia for at se, hvilken retning det tager, og hvilke muligheder det vil bringe til udviklere. Jeg er også spændt på at se, hvilke plugins Vue-communityet vil skabe til Pinia. Der er mange rigtig gode plugins til Vuex, så jeg håber, de også bliver tilgængelige i Pinia med tiden.

1 ting ved Pinia

Nu hvor jeg har dykket lidt ned i Pinia, fandt jeg en ting, som jeg synes er lidt mærkelig, eller som man kunne betragte som bad practice. I Pinia kan du direkte fra dine komponenter mutere staten i din store:

Jeg er ikke sikker på, om jeg kan lide det eller ej. Måske er det fordi man i Vuex, hvis man vil ændre noget state, skal lave en mutation, hvilket man ikke behøver i Pinia. Jeg ved ikke, om jeg ville betragte det som bad practice på nogen måde, men jeg tror det kan være farligt, da det kan forårsage utilsigtede sideeffekter. Jeg har dog ikke brugt det i et stort projekt endnu, så jeg er også tilbageholdende med at sige, at det er bad practice, bare fordi jeg har været vant til noget andet. Jeg ville elske at høre din holdning til dette?