Un'introduzione a Pinia in Vue.js

Punti chiave

• Pinia è una libreria di gestione dello stato per Vue che porta semplicità ed efficienza allo sviluppo di app, con un focus sul minimalismo e un approccio intuitivo.
• I concetti chiave di Pinia includono getter, azioni, archivio e stato, che consentono agli sviluppatori di gestire e condividere in modo efficace i dati nei loro componenti Vue.
• Rispetto a Vuex, Pinia offre un approccio più moderno e minimalista, utilizzando il sistema di reattività di Vue e fornendo una tipizzazione rigorosa e supporto TypeScript per applicazioni più robuste con meno bug. È un'opzione praticabile per nuovi progetti o per la migrazione da Vuex.

Sei uno sviluppatore Vue che cerca di semplificare la gestione dello stato e portare lo sviluppo della tua app a nuovi livelli? Saluta Pinia, la rivoluzionaria libreria di gestione dello stato per gli appassionati di Vue.

Dai un'occhiata passo dopo passo ai concetti chiave di Pinia e scopri come puoi sbloccare il suo potenziale. Scopri come questa libreria si confronta con Vuex e scopri come creare una semplice app Pinia.

Cos'è Pinia?

Pinia è una biblioteca di gestione statale appositamente realizzato per Vue, progettato per portare semplicità ed efficienza senza precedenti ai tuoi progetti Vue. Sviluppato per fornire un'esperienza senza soluzione di continuità agli sviluppatori Vue, Pinia si ispira alle migliori pratiche di moderna gestione dello stato pur essendo estremamente leggero e semplice da integrare nelle tue applicazioni.

La filosofia alla base di Pinia è quella di mantenere le cose minimali ed eleganti, rendendo semplice per gli sviluppatori gestire lo stato dell'applicazione. Adottando un approccio semplice e intuitivo, Pinia ti consente di concentrarti su ciò che conta di più e di offrire un'esperienza utente eccezionale durante la creazione della tua app Vue.

Concetti fondamentali di Pinia

Per ottenere il massimo da Pinia, è fondamentale comprenderne i concetti di base.

Getter

I getter in Pinia sono responsabili dell'estrazione e della restituzione di valori specifici dallo stato del negozio. Definendo i getter, puoi accedere ed elaborare in modo efficiente i dati senza manipolare direttamente lo stato sottostante. Pensale come proprietà calcolate su misura per lo stato del tuo negozio.

Azioni

Le azioni svolgono un ruolo cruciale in Pinia, consentendo di modificare lo stato del negozio eseguendo operazioni asincrone o sincrone. Fungono da ponte tra i componenti dell'applicazione e lo store, assicurando che le mutazioni di stato seguano modelli prevedibili e aderiscano alle best practice.

Negozio

Il negozio rappresenta il cuore di Pinia, incapsulando lo stato dell'applicazione, i getter, le azioni e le mutazioni (se presenti). Agisce come un'unica fonte di verità, mantenendo lo stato dell'applicazione centralizzato e facilmente accessibile in tutti i componenti.

Stato

Lo stato si riferisce ai dati gestiti dal tuo negozio. Sono i dati reattivi su cui si basano i tuoi componenti per mostrare all'utente le informazioni più aggiornate. Utilizzando l'oggetto stato all'interno dell'archivio, puoi gestire e condividere senza problemi i dati tra i componenti.

E Vuex?

Potresti chiederti come Pinia si confronta con Vuex, che è stata per un po 'di tempo una libreria di gestione dello stato di riferimento per gli sviluppatori Vue. Mentre Vuex è senza dubbio una soluzione robusta e potente, Pinia si distingue per un approccio più moderno e minimalista.

Pinia utilizza il sistema di reattività di Vue per gestire lo stato, evitando la necessità di eventuali dipendenze esterne. Ciò significa che l'ecosistema Pinia è più concentrato ed evita potenziali gonfiori. Inoltre, la tipizzazione rigorosa e il supporto di TypeScript che fornisce ti consentono di rilevare gli errori all'inizio del processo di sviluppo, portando ad applicazioni più robuste con meno bug.

Se stai avviando un nuovo progetto Vue o stai pensando di migrare da Vuex, Pinia offre un'alternativa interessante che semplifica la gestione dello stato senza compromettere la flessibilità o le prestazioni.

App Vue semplice con Pinia

Per imparare tutto su Pinia, prova a creare un'applicazione di esempio; UN gestore di elenchi di cose da fare di base è un buon candidato. Un'app per elenchi di cose da fare ha una struttura semplice in cui gli utenti possono aggiungere attività da fare, contrassegnare e indicare il loro completamento ed eliminare e modificare i lavori secondo necessità. Pinia fornisce gli strumenti necessari per gestire lo stato di tali applicazioni.

Prerequisiti

Prima di tutto, devi preparare l'ambiente necessario per questo progetto, a partire dalla Vue CLI.

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

A questo punto, puoi vedere nel terminale che devi selezionare un preset. Puoi continuare selezionando Guarda 3 dalle impostazioni predefinite; questo esempio lo farà continuare a utilizzare Vue 3.

Ora puoi installare Pinia nella cartella del tuo progetto:

cd pinia-todo-app
npm install pinia

Imposta i tuoi file

Devi solo modificare alcuni file per completare questo progetto di esempio.

Innanzitutto, crea un file denominato store.js sotto il src cartella. Questo file manterrà, aggiungerà ed eliminerà gli elementi che aggiungerai all'elenco delle cose da fare. Farà tutto questo utilizzando i concetti chiave di Pinia.

// 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);
 },
 },
});

Ma, ovviamente, questo file da solo non è sufficiente. Devi collegare il file store.js file con App.vue. Per farlo, cambia il file src/App.vue file come segue:

// src/App.vue