Żegnaj Vuex, witaj Pinia

Pamiętasz, jak zmagaliśmy się z Vuex? Niezliczone mutacje, dziwna składnia commit i dispatch, a typy TypeScript były prawdziwym koszmarem. Wygląda na to, że zespół Vue usłyszał nasze modlitwy i wydał Pinię. To nie jest kolejna biblioteka do zarządzania stanem, ale oficjalny następca Vuex, który znacząco ułatwia życie frontendowemu deweloperowi.

Przy okazji, nazwa to zabawna gra słowna. Pinia brzmi jak hiszpańskie słowo „piña" (ananasy). Twórcy porównują sklep do ananasa: to grupa pojedynczych kwiatów, które razem tworzą jeden owoc. Każdy sklep w Twojej aplikacji powstaje samodzielnie, ale ostatecznie pracują jako jeden zespół.

Co to jest i dlaczego tego potrzebujesz

Krótko mówiąc, Pinia to lekki sklep dla Vue, który w pełni wspiera Composition API. Waży tylko około 1 KB, obsługuje hot module reloading i dobrze współpracuje z DevTools.

Główna różnica w porównaniu ze starym podejściem to brak mutacji. Teraz możesz zmieniać stan bezpośrednio w akcjach, co znacząco zmniejsza ilość kodu boilerplate. Jeśli pracujesz z Vue 3, Pinia jest de facto standardem. Dla tych, którzy wciąż używają Vue 2, jest kompatybilność wsteczna, więc migracja nie będzie katastrofą.

Dlaczego deweloperzy wybierają ten sklep

Zidentyfikowałem kilka punktów, które naprawdę zmieniają workflow.

Obsługa TypeScript out of the box

W Vuex typowanie często przypominało używanie kul. W Pinii wszystko jest inne. Jest napisana w TypeScript, więc autouzupełnianie działa perfekcyjnie. Nie musisz ręcznie opisywać interfejsów dla każdego gettera czy akcji — biblioteka sama rozpoznaje, co zwracasz.

Modułowość bez zbędnych komplikacji

Zapomnij o zagnieżdżonych modułach i skomplikowanych ścieżkach do nich. W Pinii po prostu tworzysz różne sklepy w różnych plikach i importujesz je tam, gdzie są potrzebne. To sprawia, że architektura jest czystsza: każdy komponent pobiera tylko te dane, które faktycznie potrzebuje.

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

Prosta integracja

Możesz podłączyć bibliotekę zaledwie kilkoma linijkami kodu. Miło, że świetnie współpracuje z Nuxt i obsługuje server-side rendering (SSR).

import { createPinia } from 'pinia'
const pinia = createPinia()
app.use(pinia)

Jak to działa w praktyce

Wyobraź sobie, że masz koszyk zakupowy w sklepie internetowym. Wcześniej musiałbyś zarejestrować moduł, śledzić nazewnictwo ścieżek i pisać akcje wywołujące mutacje. Z Pinią po prostu wywołujesz metodę sklepu w komponencie jak zwykłą funkcję.

Aby pobierać dane bez utraty reaktywności, jest wygodny helper storeToRefs. Ratuje Cię, gdy musisz zdestrukturyzować sklep bez zerwania jego połączenia ze stanem.

import { useCartStore } from '@/stores/cart'
import { storeToRefs } from 'pinia'

const cart = useCartStore()
const { items, total } = storeToRefs(cart)

Czy warto się przenieść

Jeśli zaczynasz nowy projekt Vue 3, praktycznie nie ma alternatyw dla Pinii. Jest prostsza, szybsza i bardziej nowoczesna. Jeśli masz stary projekt Vuex, nie ma potrzeby się spieszyć, ale dla nowych funkcji polecałbym wypróbowanie tego podejścia.

Projekt jest aktywnie rozwijany przez Eduardo San Martina Morote (posva), który jest częścią zespołu core Vue. To daje pewność, że biblioteka nie zniknie za miesiąc. Dodatkowo Pinia ma doskonałą dokumentację i żywą społeczność.

Możesz wypróbować projekt w akcji na StackBlitz:

• Demo z Vue 3
• Demo z Nuxt 3

Komu jest to zdecydowanie dla:

1. Tym, którzy są zmęczeni rozwlekłością Vuex.
2. Fanom TypeScript, którzy doceniają jakościowe autouzupełnianie.
3. Deweloperom Nuxt 3, gdzie Pinia jest zalecanym rozwiązaniem.

Być może jedyną wadą — jeśli jesteś przyzwyczajony do sztywnej struktury Vuex z obowiązkowymi mutacjami, wolność Pinii może początkowo wydawać się dziwna. Ale do dobrych rzeczy szybko się przyzwyczajasz.