En introduksjon til Pinia i Vue.js

Viktige takeaways

• Pinia er et statlig administrasjonsbibliotek for Vue som gir enkelhet og effektivitet til apputvikling, med fokus på minimalisme og en intuitiv tilnærming.
• Pinias kjernekonsepter inkluderer getters, actions, store og state, som lar utviklere effektivt administrere og dele data i Vue-komponentene sine.
• Sammenlignet med Vuex tilbyr Pinia en mer moderne og minimalistisk tilnærming, ved å bruke Vues reaktivitetssystem og gir streng skriving og TypeScript-støtte for mer robuste applikasjoner med færre feil. Det er et levedyktig alternativ for nye prosjekter eller migrering fra Vuex.

Er du en Vue-utvikler som ønsker å strømlinjeforme statsadministrasjonen din og ta apputviklingen din til nye høyder? Si hei til Pinia, det skiftende statsadministrasjonsbiblioteket for Vue-entusiaster.

Ta en steg-for-steg titt på Pinias kjernekonsepter og se hvordan du kan frigjøre potensialet. Finn ut hvordan dette biblioteket kan sammenlignes med Vuex og lær hvordan du lager en enkel Pinia-app.

Hva er Pinia?

Pinia er et statlig ledelsesbibliotek spesielt laget for Vue, designet for å gi uovertruffen enkelhet og effektivitet til dine Vue-prosjekter. Pinia er utviklet for å gi en sømløs opplevelse for Vue-utviklere, og henter inspirasjon fra beste praksis fra moderne statsadministrasjon samtidig som den er ekstremt lett og enkel å integrere i applikasjonene dine.

Filosofien bak Pinia er å holde ting minimal og elegant, noe som gjør det enkelt for utviklere å administrere applikasjonens tilstand. Med en enkel og intuitiv tilnærming lar Pinia deg fokusere på det som betyr mest og levere en eksepsjonell brukeropplevelse når du bygger Vue-appen din.

Kjerne Pinia-konsepter

For å få mest mulig ut av Pinia, er det viktig å forstå de grunnleggende konseptene.

Getters

Getters i Pinia er ansvarlige for å trekke ut og returnere spesifikke verdier fra butikkstaten. Ved å definere gettere kan du effektivt få tilgang til og behandle data uten å direkte manipulere den underliggende tilstanden. Tenk på dem som beregnede egenskaper skreddersydd til butikkens tilstand.

Handlinger

Handlinger spiller en avgjørende rolle i Pinia, og lar deg endre butikkens tilstand ved å utføre asynkrone eller synkrone operasjoner. De fungerer som broen mellom applikasjonens komponenter og butikken, og sikrer at tilstandsmutasjoner følger forutsigbare mønstre og følger beste praksis.

butikk

Butikken representerer hjertet av Pinia, og innkapsler applikasjonens tilstand, getters, handlinger og mutasjoner (hvis noen). Den fungerer som en enkelt kilde til sannhet, og holder applikasjonens tilstand sentralisert og lett tilgjengelig gjennom komponentene dine.

Stat

State refererer til dataene som butikken din administrerer. Det er de reaktive dataene komponentene dine er avhengige av for å vise den mest oppdaterte informasjonen til brukeren. Ved å bruke tilstandsobjektet i butikken kan du sømløst administrere og dele data på tvers av komponenter.

Hva med Vuex?

Du lurer kanskje på hvordan Pinia kan sammenlignes med Vuex, som har vært et statlig administrasjonsbibliotek for Vue-utviklere i ganske lang tid. Mens Vuex utvilsomt er en robust og kraftig løsning, skiller Pinia seg ut med en mer moderne og minimalistisk tilnærming.

Pinia bruker Vues reaktivitetssystem for å administrere tilstand, og unngår behovet for eksterne avhengigheter. Dette betyr at Pinia-økosystemet er mer fokusert og unngår potensiell oppblåsthet. I tillegg lar den strenge skrive- og TypeScript-støtten deg fange opp feil tidlig i utviklingsprosessen, noe som fører til mer robuste applikasjoner med færre feil.

Hvis du starter et nytt Vue-prosjekt eller vurderer å migrere fra Vuex, tilbyr Pinia et attraktivt alternativ som effektiviserer statsadministrasjonen uten å gå på kompromiss med fleksibilitet eller ytelse.

Enkel Vue-app som bruker Pinia

For å lære alt om Pinia, prøv å bygge en prøveapplikasjon; en grunnleggende oppgavelistebehandler er en god kandidat. En gjøremålsliste-app har en enkel struktur der brukere kan legge til gjøremålsoppgaver, merke og indikere at de er fullført, og slette og redigere jobber etter behov. Pinia gir verktøyene du trenger for å administrere staten for slike applikasjoner.

Forutsetninger

Først av alt må du forberede det nødvendige miljøet for dette prosjektet, og starter med Vue CLI.

# To install Vue CLI:
npm install -g @vue/cli
# To create the project folder with Vue CLI:
vue create pinia-todo-app

På dette stadiet kan du se i terminalen at du må velge en forhåndsinnstilling. Du kan fortsette ved å velge Vue 3 fra standardinnstillingene; dette eksemplet vil fortsett å bruke Vue 3.

Nå kan du installere Pinia i prosjektmappen din:

cd pinia-todo-app
npm install pinia

Sett opp filene dine

Du trenger bare å redigere noen få filer for å fullføre dette eksempelprosjektet.

Lag først en fil med navnet store.js under src mappe. Denne filen vil inneholde, legge til og slette elementer som du vil legge til i oppgavelisten. Det vil gjøre alt dette ved å bruke Pinia kjernekonsepter.

// src/store.js
import { defineStore } from"pinia";
exportconst useTodoStore = defineStore("todo", {
 state: () => ({
 todos: [],
 }),
 actions: {
 addTodo(todoText) {
this.todos.push({ id: Date.now(), text: todoText });
 },
 removeTodo(todoId) {
this.todos = this.todos.filter((todo) => todo.id !== todoId);
 },
 },
});

Men denne filen alene er selvfølgelig ikke nok. Du må koble til store.js fil med App.vue. For å gjøre det, endre src/App.vue fil som følger:

// src/App.vue