En introduktion till Pinia i Vue.js

Viktiga takeaways

• Pinia är ett tillståndshanteringsbibliotek för Vue som ger enkelhet och effektivitet till apputveckling, med fokus på minimalism och ett intuitivt tillvägagångssätt.
• Pinias kärnkoncept inkluderar getters, actions, store och state, som tillåter utvecklare att effektivt hantera och dela data i sina Vue-komponenter.
• Jämfört med Vuex erbjuder Pinia ett mer modernt och minimalistiskt tillvägagångssätt, genom att använda Vues reaktivitetssystem och tillhandahålla strikt typning och TypeScript-stöd för mer robusta applikationer med färre buggar. Det är ett gångbart alternativ för nya projekt eller migrering från Vuex.

Är du en Vue-utvecklare som vill effektivisera din statliga förvaltning och ta din apputveckling till nya höjder? Säg hej till Pinia, det omvälvande tillståndshanteringsbiblioteket för Vue-entusiaster.

Ta en steg-för-steg titt på Pinias kärnkoncept och se hur du kan frigöra dess potential. Ta reda på hur det här biblioteket kan jämföras med Vuex och lär dig hur du skapar en enkel Pinia-app.

Vad är Pinia?

Pinia är ett statligt förvaltningsbibliotek speciellt skapad för Vue, designad för att ge oöverträffad enkelhet och effektivitet till dina Vue-projekt. Pinia har utvecklats för att ge en sömlös upplevelse för Vue-utvecklare och hämtar inspiration från bästa praxis modern tillståndshantering samtidigt som den är extremt lätt och enkel att integrera i dina applikationer.

Filosofin bakom Pinia är att hålla saker minimala och eleganta, vilket gör det enkelt för utvecklare att hantera applikationens tillstånd. Med ett enkelt och intuitivt tillvägagångssätt låter Pinia dig fokusera på det som är viktigast och leverera en exceptionell användarupplevelse när du bygger din Vue-app.

Kärn Pinia koncept

För att få ut det mesta av Pinia är det viktigt att förstå dess grundläggande koncept.

Getters

Getters i Pinia ansvarar för att extrahera och returnera specifika värden från butiksstaten. Genom att definiera getters kan du effektivt komma åt och bearbeta data utan att direkt manipulera det underliggande tillståndet. Se dem som beräknade egenskaper som är skräddarsydda för din butiks tillstånd.

Handlingar

Åtgärder spelar en avgörande roll i Pinia, vilket gör att du kan ändra butikens tillstånd genom att utföra asynkrona eller synkrona operationer. De fungerar som bryggan mellan din applikations komponenter och butiken, och säkerställer att tillståndsmutationer följer förutsägbara mönster och följer bästa praxis.

Lagra

Butiken representerar hjärtat av Pinia, och kapslar in applikationens tillstånd, getters, åtgärder och mutationer (om några). Det fungerar som en enda källa till sanning, och håller din applikations status centraliserad och lättillgänglig i alla dina komponenter.

stat

State hänvisar till den data som din butik hanterar. Det är den reaktiva informationen som dina komponenter förlitar sig på för att visa den mest uppdaterade informationen för användaren. Genom att använda tillståndsobjektet i butiken kan du sömlöst hantera och dela data mellan komponenter.

Vad sägs om Vuex?

Du kanske undrar hur Pinia kan jämföras med Vuex, som har varit ett vanligt förvaltningsbibliotek för Vue-utvecklare under ganska lång tid. Medan Vuex utan tvekan är en robust och kraftfull lösning, skiljer sig Pinia med ett mer modernt och minimalistiskt tillvägagångssätt.

Pinia använder Vues reaktivitetssystem för att hantera tillstånd, och undviker behovet av externa beroenden. Detta innebär att Pinia-ekosystemet är mer fokuserat och undviker potentiell uppblåsthet. Dessutom låter det strikta skriv- och TypeScript-stödet dig fånga fel tidigt i utvecklingsprocessen, vilket leder till mer robusta applikationer med färre buggar.

Om du startar ett nytt Vue-projekt eller funderar på att migrera från Vuex, erbjuder Pinia ett attraktivt alternativ som effektiviserar statlig förvaltning utan att kompromissa med flexibilitet eller prestanda.

Enkel Vue-app med Pinia

För att lära dig allt om Pinia, prova att bygga en exempelapplikation; a grundläggande att göra-lista manager är en bra kandidat. En att-göra-lista-app har en enkel struktur där användare kan lägga till att göra-uppgifter, markera och indikera att de är klara och radera och redigera jobb efter behov. Pinia tillhandahåller de verktyg du behöver för att hantera tillståndet för sådana applikationer.

Förutsättningar

Först och främst måste du förbereda den nödvändiga miljön för detta projekt, med början 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

I detta skede kan du se i terminalen att du behöver välja en förinställning. Du kan fortsätta genom att välja Vy 3 från standardinställningarna; detta exempel kommer fortsätt använda Vue 3.

Nu kan du installera Pinia i din projektmapp:

cd pinia-todo-app
npm install pinia

Konfigurera dina filer

Du behöver bara redigera några filer för att slutföra detta exempelprojekt.

Skapa först en fil med namnet store.js under src mapp. Den här filen kommer att hålla, lägga till och ta bort objekt som du kommer att lägga till i att göra-listan. Det kommer att göra allt detta med Pinias kärnkoncept.

// 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 den här filen räcker förstås inte ensam. Du måste länka store.js fil med App.vue. För att göra det, ändra src/App.vue fil enligt följande:

// src/App.vue