Pinia vs. Vuex: Gründe für den Wechsel
Keine Mutations, TypeScript-Inferenz, Devtools-Unterstützung, einfachere API und standardmäßig modulare Struktur
Pinia vs. Vuex: Gründe für den Wechsel ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Warum Pinia Vuex ersetzt hat
Pinia ist die offizielle State-Management-Bibliothek für Vue 3 und wird gegenüber Vuex empfohlen. Sie behält die guten Seiten von Vuex bei, entfernt aber den Boilerplate-Code und die Teile, die nicht gut mit TypeScript zusammenspielten.
Keine Mutations mehr
Vuex verlangte mutations als einzige Möglichkeit, den State zu ändern. Pinia schafft sie vollständig ab – Actions ändern den State direkt. Weniger Formalitäten, weniger Dateien, dieselbe Nachverfolgung in den Devtools.
// Vuex: state -> mutation -> action (3 steps)
// Pinia: action mutates state directly (1 step)
actions: {
increment() {
this.count++ // direct, no commit needed
}
}TypeScript-Inferenz direkt integriert
In Vuex war es mühsam, den Store zu typisieren, und es waren komplexe Wrapper nötig. Pinia leitet Typen automatisch aus Ihren state-, getters- und actions-Definitionen ab – ganz ohne zusätzliche Typisierungsebene.
const store = useCounterStore()
store.count // inferred as number
store.doubled // inferred from getter
store.increment() // fully typed actionVon Grund auf modular
Vuex verwendete einen einzigen Store mit verschachtelten modules und Problemen durch Namespaces. Pinia ist von Natur aus modular: eine Datei pro Store, jeweils mit einem eigenen defineStore erstellt. Eine zentrale Registrierung ist nicht nötig.
// stores/counter.js
export const useCounterStore = defineStore(...)
// stores/user.js
export const useUserStore = defineStore(...)Keine Namespaces erforderlich
Da jeder Store unabhängig ist und dort importiert wird, wo er verwendet wird, müssen Sie keinen globalen Namespace verwalten. Importieren Sie einfach den gewünschten Store und rufen Sie ihn als Funktion auf.
import { useUserStore } from '@/stores/user'
const user = useUserStore()Devtools-Unterstützung
Pinia lässt sich wie Vuex in die Vue Devtools integrieren. Sie erhalten eine Zeitleiste der Actions, eine State-Inspektion und Debugging mit Zeitreisen – ohne Mutations schreiben zu müssen.
Kleineres Bundle
Pinia ist ungefähr 1 KB kleiner als Vuex und tree-shake-fähig. Stores, die Sie nie importieren, werden nicht in das finale Bundle aufgenommen.
Flachere API
Es gibt keinen Boilerplate-Code mit mapState, mapGetters oder mapActions. Rufen Sie das Store-Composable innerhalb von setup auf und verwenden Sie das zurückgegebene Objekt direkt.
const counter = useCounterStore()
// access state, getters, and actions on one objectFunktioniert mit beiden APIs
Pinia unterstützt die Options API und die Composition API. Die beiden Schreibweisen für einen Store sind der Options-Store (Objekt) und der Setup-Store (Funktion), die später in diesem Kurs behandelt werden.
Pinia installieren
Fügen Sie Pinia zu Ihrer App hinzu, indem Sie die Instanz erstellen und als Plugin registrieren. Von da an kann jede Komponente jeden Store verwenden.
import { createPinia } from 'pinia'
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).use(createPinia()).mount('#app')Wann Sie Pinia verwenden sollten
Verwenden Sie Pinia, wenn der State von vielen Komponenten gemeinsam genutzt werden, Routenwechsel überdauern oder in den Devtools untersucht werden muss. Für State, der nur zu einer Komponente gehört, ist ein einfacher ref weiterhin die unkompliziertere Lösung.
Kurze Überprüfung
Testen Sie Ihr Verständnis dafür, warum Pinia Vuex ersetzt hat.
Zusammenfassung
Pinia ist die moderne Wahl für State in Vue 3:
- Keine Mutations – Actions ändern den State direkt.
- Automatische TypeScript-Inferenz ohne Wrapper.
- Modular: ein Store pro Datei, keine Namespaces.
- Vollständige Devtools-Unterstützung und ein etwa 1 KB kleineres Bundle.
Häufig gestellte Fragen
Ist die Lektion „Pinia vs. Vuex: Gründe für den Wechsel“ kostenlos?
Ja — der vollständige Text von „Pinia vs. Vuex: Gründe für den Wechsel“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Pinia vs. Vuex: Gründe für den Wechsel“?
Keine Mutations, TypeScript-Inferenz, Devtools-Unterstützung, einfachere API und standardmäßig modulare Struktur Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Vue Academy zu starten?
Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „Pinia vs. Vuex: Gründe für den Wechsel“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?
Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Pinia vs. Vuex: Gründe für den Wechsel
- defineStore: State, Getter und Actions
- Stores kombinieren und storeübergreifend zugreifen
- Pinia-Persistenz und Devtools