Čistý store Pinia: struktura a praktiky

Struktura čistého úložiště v Pinia: Osvědčené postupy

V rozsáhlých Vue projektech se úložiště Pinia často rozrůstají, což komplikuje údržbu. Správná struktura řeší problém: mutace pouze přes akce, setup syntax, absence vedlejších účinků uvnitř úložiště. Tím je zajištěna předvídatelnost a zjednodušeno testování pro středně pokročilé a senior vývojáře.

Mutace pouze přes akce

Přímá změna stavu z komponent vede k rozptýlené odpovědnosti. Příklad problematického kódu:

const docStore = useDocumentStore()
const { client } = storeToRefs(docStore)
client.value = null // Rozptýlená logika změn

Po čase se ladění stane nemožným: změny jsou rozptýleny po komponentech. Řešení — centralizované akce:

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

// V komponentu
 docStore.resetClient()

Jedna vstupní bod zjednodušuje přidání validace, logování nebo analytiky bez úprav v celém kódu.

Setup Stores místo Options API

Options API je pro úložiště zastaralý. Setup styl (defineStore(() => { ... })) zajišťuje:

• Průhlednou reaktivitu bez this.
• Snadnost testování.
• Integraci s kompozabily.

Méně šablonového kódu, reaktivita jako v komponentech. Pro nová úložiště je přechod povinný — rozdíl je viditelný okamžitě.

Odmítnutí watch v úložištích

Watch uvnitř úložiště spouští skryté vedlejší účinky při změně stavu, což komplikuje ladění. Úložiště — pouze datové úložiště, bez dispečování událostí.

Nahrazujte watch explicitními voláními z komponent nebo kompozabilů. Reakci na routy, URL nebo externí události vyneste ven, předávajíce hotová data přes akce.

Persistence přes pluginy

Synchronizace s localStorage by se neměla míchat s obchodní logikou. Použijte pinia-plugin-persistedstate nebo vlastní obálku s testy.

Vyhněte se přímým localStorage.setItem v akcích — to narušuje čistotu úložiště a komplikuje refaktorování.

Úložiště jako čisté úložiště

Úložiště odpovídá pouze za čtení, ukládání a aktualizaci dat. Vyneste:

• Odběry na router.
• Parsování tokenů.
• WebSocket logiku.
• Výpočty mezi úložišti.

Kontrolní seznam před commitem:

• Mohu nahradit úložiště souborem s konstantami a funkcemi bez rozbití architektury?
• Pokud ne — přetíženo odpovědností, vyneste logiku.

Co je důležité

• Centralizované mutace: akce místo přímého přístupu k ref.
• Setup syntax: snazší testování, žádné this.
• Bez watch: vedlejší účinky ven, úložiště zůstává předvídatelné.
• Persistence odděleně: pluginy, ne v akcích.
• Omezená odpovědnost: vynášení složité logiky do kompozabilů.

Tato struktura dělá úložiště malá, snadno mockovatelná a nezpůsobující paniku při refaktorování. Projekt se stává udržitelným a zvyk se rychle formuje.

— Editorial Team