Czysty store Pinia: struktura i praktyki

Struktura czystego magazynu w Pinia: sprawdzone praktyki

W dużych projektach Vue, magazyny Pinia często się rozrastają, utrudniając utrzymanie. Właściwa struktura rozwiązuje ten problem: mutacje tylko przez akcje, setup-syntax, brak efektów ubocznych wewnątrz magazynu. Zapewnia to przewidywalność i ułatwia testowanie dla programistów średniego i zaawansowanego poziomu.

Mutacje tylko przez akcje

Bezpośrednia zmiana stanu z komponentów prowadzi do rozmytej odpowiedzialności. Przykładowy problematyczny kod:

const docStore = useDocumentStore()
const { client } = storeToRefs(docStore)
client.value = null // Rozproszona logika zmian

Z czasem debugowanie staje się niemożliwe: zmiany są rozrzucone po komponentach. Rozwiązanie to scentralizowane akcje:

export const useDocumentStore = defineStore('documents', () => {
  const client = ref(null)
  const resetClient = () => { client.value = null }
  return { client, resetClient }
})

// W komponencie
 docStore.resetClient()

Jedno wejście upraszcza dodawanie walidacji, logowania lub analizy bez modyfikacji w całym kodzie.

Magazyny Setup zamiast Options API

Options API jest przestarzały dla magazynów. Styl setup (defineStore(() => { ... })) zapewnia:

• Przejrzystą reaktywność bez this.
• Łatwość testowania.
• Integrację z kompozytami.

Mniej kodu boilerplate, reaktywność jak w komponentach. Dla nowych magazynów przejście jest obowiązkowe – różnica jest widoczna od razu.

Rezygnacja z watch w magazynach

Watch wewnątrz magazynu uruchamia ukryte efekty uboczne przy zmianie stanu, co utrudnia debugowanie. Magazyn to tylko przechowywanie danych, bez dysponowania zdarzeniami.

Zastępuj watch jawnymi wywołaniami z komponentów lub kompozytów. Reakcję na trasy, URL lub zewnętrzne zdarzenia wynoś na zewnątrz, przekazując gotowe dane przez akcje.

Trwałość przez wtyczki

Synchronizacja z localStorage nie powinna mieszać się z logiką biznesową. Użyj pinia-plugin-persistedstate lub własnej otoczki z testami.

Unikaj bezpośrednich localStorage.setItem w akcjach – to narusza czystość magazynu i utrudnia refaktoryzację.

Magazyn jako czyste przechowywanie

Magazyn odpowiada tylko za odczyt, zapis i aktualizację danych. Wynoś:

• Subskrypcje na router.
• Parsowanie tokenów.
• Logikę WebSocket.
• Obliczenia między magazynami.

Lista kontrolna przed commitem:

• Czy mogę zastąpić magazyn plikiem z stałymi i funkcjami bez zepsucia architektury?
• Jeśli nie, to jest przeciążony odpowiedzialnością, wynoś logikę.

Co jest ważne

• Scentralizowane mutacje: akcje zamiast bezpośredniego dostępu do ref.
• Setup-syntax: łatwiejsze testowanie, brak this.
• Bez watch: efekty uboczne na zewnątrz, magazyn pozostaje przewidywalny.
• Trwałość osobno: wtyczki, nie w akcjach.
• Ograniczona odpowiedzialność: wynoszenie złożonej logiki do kompozytów.

Taka struktura sprawia, że magazyny są małe, łatwe do mockowania i nie wywołują paniki przy refaktoryzacji. Projekt staje się utrzymywalny, a nawyk formuje się szybko.

— Editorial Team