0Pricing
Vue Academy · Lekcja

Pinia czy Vuex: dlaczego warto przejść

Brak mutacji, inferencja TypeScript, obsługa devtools, prostsze API i domyślna modularność.

Pinia czy Vuex: dlaczego warto przejść to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Dlaczego Pinia zastąpiła Vuex

Pinia to oficjalna biblioteka zarządzania stanem dla Vue 3, zalecana zamiast Vuex. Zachowuje zalety Vuex, ale usuwa nadmiarowy kod oraz elementy, które utrudniały pracę z TypeScript.

Koniec z mutacjami

Vuex wymagał używania mutations jako jedynego sposobu zmiany stanu. Pinia całkowicie z nich rezygnuje — akcje bezpośrednio zmieniają stan. Mniej formalności, mniej plików i to samo śledzenie w narzędziach deweloperskich.

// Vuex: state -> mutation -> action (3 steps)
// Pinia: action mutates state directly (1 step)
actions: {
  increment() {
    this.count++ // direct, no commit needed
  }
}

Automatyczne wnioskowanie typów TypeScript

W Vuex typowanie store'a było uciążliwe i wymagało złożonych wrapperów. Pinia automatycznie wnioskuje typy na podstawie state, getters i actions — bez dodatkowej warstwy typowania.

const store = useCounterStore()
store.count       // inferred as number
store.doubled     // inferred from getter
store.increment() // fully typed action

Modularność w założeniu

Vuex używał jednego store'a z zagnieżdżonymi modules i problemami z namespacingiem. Pinia jest z natury modularna: jeden plik na store, a każdy store jest tworzony za pomocą własnego defineStore. Nie ma centralnej rejestracji.

// stores/counter.js
export const useCounterStore = defineStore(...)

// stores/user.js
export const useUserStore = defineStore(...)

Bez potrzeby namespacingu

Ponieważ każdy store jest niezależny i importuje się go w miejscu użycia, nie ma globalnej przestrzeni nazw, którą trzeba zarządzać. Wystarczy zaimportować wybrany store i wywołać go jak funkcję.

import { useUserStore } from '@/stores/user'
const user = useUserStore()

Obsługa w narzędziach deweloperskich

Pinia integruje się z Vue Devtools tak samo jak Vuex. Dostępne są oś czasu akcji, inspekcja stanu i debugowanie z cofaniem w czasie — bez konieczności pisania mutacji.

Mniejszy bundle

Pinia jest około 1 KB mniejsza od Vuex i obsługuje tree-shaking. Store'y, których nigdy się nie importuje, nie zostaną dołączone do końcowego bundle'a.

Prostsze API

Nie ma tu nadmiarowego kodu mapState, mapGetters ani mapActions. Należy wywołać composable store'a wewnątrz setup i bezpośrednio używać zwróconego obiektu.

const counter = useCounterStore()
// access state, getters, and actions on one object

Działa z oboma API

Pinia obsługuje Options API i Composition API. Dwa style tworzenia store'a to option store (obiekt) i setup store (funkcja), które zostaną omówione w dalszej części tego kursu.

Instalowanie Pinia

Należy dodać Pinia do aplikacji, tworząc jej instancję i rejestrując ją jako plugin. Od tego momentu każdy komponent może korzystać z dowolnego store'a.

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).use(createPinia()).mount('#app')

Kiedy używać Pinia

Pinia warto stosować, gdy stan musi być współdzielony przez wiele komponentów, zachowywany podczas zmiany tras lub przeglądany w narzędziach deweloperskich. W przypadku stanu lokalnego dla jednego komponentu zwykły ref nadal jest prostszym rozwiązaniem.

Szybkie sprawdzenie

Sprawdź swoją wiedzę o tym, dlaczego Pinia zastąpiła Vuex.

Podsumowanie

Pinia to nowoczesny wybór do zarządzania stanem w Vue 3:

  • Brak mutacji — akcje bezpośrednio zmieniają stan.
  • Automatyczne wnioskowanie typów TypeScript, bez wrapperów.
  • Modularność: jeden store na plik, bez namespacingu.
  • Pełna obsługa narzędzi deweloperskich i bundle mniejszy o około 1 KB.

Często zadawane pytania

Czy lekcja „Pinia czy Vuex: dlaczego warto przejść” jest bezpłatna?

Tak — pełny tekst „Pinia czy Vuex: dlaczego warto przejść” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Pinia czy Vuex: dlaczego warto przejść”?

Brak mutacji, inferencja TypeScript, obsługa devtools, prostsze API i domyślna modularność. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Pinia czy Vuex: dlaczego warto przejść”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Pinia czy Vuex: dlaczego warto przejść
  2. defineStore: stan, gettery i akcje
  3. Komponowanie store i dostęp między store
  4. Trwałość danych Pinia i devtools
← Powrót do Vue Academy