En introduktion til Pinia i Vue.js

Nøgle takeaways

• Pinia er et statsadministrationsbibliotek for Vue, der bringer enkelhed og effektivitet til appudvikling med fokus på minimalisme og en intuitiv tilgang.
• Pinias kernekoncepter omfatter getters, handlinger, butik og tilstand, som giver udviklere mulighed for effektivt at administrere og dele data i deres Vue-komponenter.
• Sammenlignet med Vuex tilbyder Pinia en mere moderne og minimalistisk tilgang, der bruger Vues reaktivitetssystem og giver streng skrivning og TypeScript-understøttelse til mere robuste applikationer med færre fejl. Det er en levedygtig mulighed for nye projekter eller migrering fra Vuex.

Er du en Vue-udvikler, der ønsker at strømline din statsforvaltning og tage din app-udvikling til nye højder? Sig hej til Pinia, det skiftende statsadministrationsbibliotek for Vue-entusiaster.

Tag et trin-for-trin kig på Pinias kernekoncepter og se, hvordan du kan frigøre dets potentiale. Find ud af, hvordan dette bibliotek kan sammenlignes med Vuex, og lær, hvordan du opretter en simpel Pinia-app.

Hvad er Pinia?

Pinia er et statsforvaltningsbibliotek specielt lavet til Vue, designet til at bringe uovertruffen enkelhed og effektivitet til dine Vue-projekter. Pinia er udviklet til at give en problemfri oplevelse for Vue-udviklere og henter inspiration fra bedste praksis fra moderne statsadministration, samtidig med at den er ekstremt let og ligetil at integrere i dine applikationer.

Filosofien bag Pinia er at holde tingene minimale og elegante, hvilket gør det nemt for udviklere at administrere applikationens tilstand. Med en enkel og intuitiv tilgang giver Pinia dig mulighed for at fokusere på det, der betyder mest og levere en enestående brugeroplevelse, når du bygger din Vue-app.

Kerne Pinia-koncepter

For at få mest muligt ud af Pinia er det vigtigt at forstå dets grundlæggende koncepter.

Getters

Getters i Pinia er ansvarlige for at udtrække og returnere specifikke værdier fra butiksstaten. Ved at definere gettere kan du effektivt få adgang til og behandle data uden direkte at manipulere den underliggende tilstand. Tænk på dem som beregnede egenskaber, der er skræddersyet til din butiks tilstand.

Handlinger

Handlinger spiller en afgørende rolle i Pinia, hvilket gør det muligt for dig at ændre butikkens tilstand ved at udføre asynkrone eller synkrone operationer. De fungerer som broen mellem din applikations komponenter og butikken og sikrer, at tilstandsmutationer følger forudsigelige mønstre og overholder bedste praksis.

butik

Butikken repræsenterer hjertet af Pinia og indkapsler applikationens tilstand, getters, handlinger og mutationer (hvis nogen). Det fungerer som en enkelt kilde til sandhed, og holder din applikations tilstand centraliseret og let tilgængelig i alle dine komponenter.

Stat

Tilstand refererer til de data, som din butik administrerer. Det er de reaktive data, som dine komponenter er afhængige af for at vise den mest opdaterede information til brugeren. Ved at bruge tilstandsobjektet i butikken kan du problemfrit administrere og dele data på tværs af komponenter.

Hvad med Vuex?

Du undrer dig måske over, hvordan Pinia kan sammenlignes med Vuex, som har været et gå-til-statsstyringsbibliotek for Vue-udviklere i et stykke tid. Mens Vuex utvivlsomt er en robust og kraftfuld løsning, adskiller Pinia sig med en mere moderne og minimalistisk tilgang.

Pinia bruger Vues reaktivitetssystem til at styre tilstanden og undgår behovet for eksterne afhængigheder. Dette betyder, at Pinia-økosystemet er mere fokuseret og undgår potentiel oppustethed. Derudover lader den strenge skrive- og TypeScript-understøttelse dig fange fejl tidligt i udviklingsprocessen, hvilket fører til mere robuste applikationer med færre fejl.

Hvis du starter et nyt Vue-projekt eller overvejer at migrere fra Vuex, tilbyder Pinia et attraktivt alternativ, der strømliner statsforvaltningen uden at gå på kompromis med fleksibilitet eller ydeevne.

Simpel Vue-app ved hjælp af Pinia

For at lære alt om Pinia, prøv at bygge en prøveapplikation; -en grundlæggende to-do liste manager er en god kandidat. En to-do-liste-app har en simpel struktur, hvor brugere kan tilføje to-do-opgaver, markere og angive deres afslutning og slette og redigere job efter behov. Pinia leverer de værktøjer, du har brug for til at administrere staten for sådanne applikationer.

Forudsætninger

Først og fremmest skal du forberede det nødvendige miljø til dette projekt, begyndende 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 tidspunkt kan du se i terminalen, at du skal vælge en forudindstilling. Du kan fortsætte ved at vælge Vue 3 fra standardindstillingerne; dette eksempel vil fortsæt med at bruge Vue 3.

Nu kan du installere Pinia i din projektmappe:

cd pinia-todo-app
npm install pinia

Konfigurer dine filer

Du skal blot redigere et par filer for at fuldføre dette eksempelprojekt.

Først skal du oprette en fil med navnet store.js under src folder. Denne fil vil indeholde, tilføje og slette elementer, som du vil tilføje til opgavelisten. Det vil gøre alt dette ved hjælp af Pinia kernekoncepter.

// 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 fil alene er selvfølgelig ikke nok. Du skal linke store.js fil med App.vue. For at gøre det skal du ændre src/App.vue fil som følger:

// src/App.vue