Eine Einführung in Pinia in Vue.js

Die zentralen Thesen

• Pinia ist eine Zustandsverwaltungsbibliothek für Vue, die Einfachheit und Effizienz in die App-Entwicklung bringt, wobei der Schwerpunkt auf Minimalismus und einem intuitiven Ansatz liegt.
• Zu den Kernkonzepten von Pinia gehören Getter, Aktionen, Speichern und Status, die es Entwicklern ermöglichen, Daten in ihren Vue-Komponenten effektiv zu verwalten und zu teilen.
• Im Vergleich zu Vuex bietet Pinia einen moderneren und minimalistischeren Ansatz, indem es das Reaktivitätssystem von Vue nutzt und strikte Typisierung und TypeScript-Unterstützung für robustere Anwendungen mit weniger Fehlern bietet. Es ist eine praktikable Option für neue Projekte oder die Migration von Vuex.

Sind Sie ein Vue-Entwickler und möchten Ihre Statusverwaltung optimieren und Ihre App-Entwicklung auf ein neues Niveau bringen? Begrüßen Sie Pinia, die bahnbrechende State-Management-Bibliothek für Vue-Enthusiasten.

Schauen Sie sich Schritt für Schritt die Kernkonzepte von Pinia an und finden Sie heraus, wie Sie sein Potenzial freisetzen können. Finden Sie heraus, wie diese Bibliothek im Vergleich zu Vuex abschneidet, und erfahren Sie, wie Sie eine einfache Pinia-App erstellen.

Was ist Pinia?

Pinia ist speziell eine staatliche Verwaltungsbibliothek für Vue gefertigt, entwickelt, um Ihren Vue-Projekten beispiellose Einfachheit und Effizienz zu verleihen. Pinia wurde entwickelt, um Vue-Entwicklern ein nahtloses Erlebnis zu bieten, und lässt sich von den Best Practices von inspirieren modernes Zustandsmanagement und gleichzeitig extrem leichtgewichtig und einfach in Ihre Anwendungen zu integrieren.

Die Philosophie hinter Pinia besteht darin, die Dinge minimalistisch und elegant zu halten, damit Entwickler den Status der Anwendung mühelos verwalten können. Mit einem einfachen und intuitiven Ansatz ermöglicht Ihnen Pinia, sich auf das Wesentliche zu konzentrieren und beim Erstellen Ihrer Vue-App ein außergewöhnliches Benutzererlebnis zu bieten.

Kernkonzepte von Pinia

Um das Beste aus Pinia herauszuholen, ist es wichtig, seine Grundkonzepte zu verstehen.

Getter

Getter in Pinia sind dafür verantwortlich, bestimmte Werte aus dem Speicherstatus zu extrahieren und zurückzugeben. Durch die Definition von Gettern können Sie effizient auf Daten zugreifen und diese verarbeiten, ohne den zugrunde liegenden Zustand direkt zu manipulieren. Betrachten Sie sie als berechnete Eigenschaften, die auf den Zustand Ihres Geschäfts zugeschnitten sind.

Aktionen

Aktionen spielen in Pinia eine entscheidende Rolle und ermöglichen es Ihnen, den Zustand des Shops durch die Durchführung asynchroner oder synchroner Vorgänge zu ändern. Sie dienen als Brücke zwischen den Komponenten Ihrer Anwendung und dem Store und stellen sicher, dass Zustandsmutationen vorhersehbaren Mustern folgen und Best Practices einhalten.

Speichern

Der Store stellt das Herzstück von Pinia dar und kapselt den Status der Anwendung, Getter, Aktionen und Mutationen (falls vorhanden). Es fungiert als Single Source of Truth und sorgt dafür, dass der Status Ihrer Anwendung zentralisiert und in allen Komponenten leicht zugänglich ist.

Zustand

Der Status bezieht sich auf die Daten, die Ihr Shop verwaltet. Es sind die reaktiven Daten, auf die Ihre Komponenten angewiesen sind, um dem Benutzer die aktuellsten Informationen anzuzeigen. Durch die Verwendung des Statusobjekts im Store können Sie Daten nahtlos komponentenübergreifend verwalten und teilen.

Was ist mit Vuex?

Sie fragen sich vielleicht, wie Pinia im Vergleich zu Vuex abschneidet, das seit geraumer Zeit eine beliebte Zustandsverwaltungsbibliothek für Vue-Entwickler ist. Während Vuex zweifellos eine robuste und leistungsstarke Lösung ist, zeichnet sich Pinia durch einen moderneren und minimalistischeren Ansatz aus.

Pinia nutzt das Reaktivitätssystem von Vue zur Zustandsverwaltung und vermeidet so die Notwendigkeit externer Abhängigkeiten. Dies bedeutet, dass das Pinia-Ökosystem fokussierter ist und eine mögliche Aufblähung vermieden wird. Darüber hinaus können Sie durch die strikte Typisierung und TypeScript-Unterstützung Fehler frühzeitig im Entwicklungsprozess erkennen, was zu robusteren Anwendungen mit weniger Fehlern führt.

Wenn Sie ein neues Vue-Projekt starten oder eine Migration von Vuex in Betracht ziehen, bietet Pinia eine attraktive Alternative, die die Zustandsverwaltung rationalisiert, ohne Kompromisse bei Flexibilität oder Leistung einzugehen.

Einfache Vue-App mit Pinia

Um alles über Pinia zu erfahren, versuchen Sie, eine Beispielanwendung zu erstellen. A Einfacher To-Do-Listen-Manager ist ein guter Kandidat. Eine To-Do-Listen-App hat eine einfache Struktur, in der Benutzer To-Do-Aufgaben hinzufügen, deren Erledigung markieren und anzeigen sowie Aufgaben nach Bedarf löschen und bearbeiten können. Pinia stellt die Tools bereit, die Sie zum Verwalten des Status solcher Anwendungen benötigen.

Voraussetzungen

Zunächst müssen Sie die erforderliche Umgebung für dieses Projekt vorbereiten, beginnend mit der Vue-CLI.

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

Zu diesem Zeitpunkt können Sie im Terminal sehen, dass Sie eine Voreinstellung auswählen müssen. Sie können durch Auswählen fortfahren Vue 3 von den Standardeinstellungen; Dieses Beispiel wird weiterhin Vue 3 verwenden.

Jetzt können Sie Pinia in Ihrem Projektordner installieren:

cd pinia-todo-app
npm install pinia

Richten Sie Ihre Dateien ein

Sie müssen nur ein paar Dateien bearbeiten, um dieses Beispielprojekt abzuschließen.

Erstellen Sie zunächst eine Datei mit dem Namen store.js unter dem src Ordner. In dieser Datei werden Elemente gespeichert, hinzugefügt und gelöscht, die Sie zur Aufgabenliste hinzufügen. All dies wird mithilfe der Pinia-Kernkonzepte erreicht.

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

Aber diese Datei allein reicht natürlich nicht aus. Sie müssen das verknüpfen store.js Datei mit App.vue. Ändern Sie dazu die src/App.vue Datei wie folgt:

// src/App.vue