메뉴
Persist a Pinia store instance with @stainless-code/persist (persistStore). Use when wiring Pinia option/setup stores to storage; hydrate applies via $state = (not $patch), with default shallow merge.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Gate Alpine.js UI on Persist hydration (Alpine.plugin + useHydrated / $hydrated). Use when wiring HydrationSignal into Alpine data components.
Gate Angular UI on Persist hydration with useHydrated (readonly Signal). Call inside an injection context; use when avoiding flash of default state on async backends.
Gate Lit element UI on Persist hydration with HydrationController. Use when wiring HydrationSignal into a ReactiveControllerHost; not a hook.
Persist with React Native AsyncStorage via @stainless-code/persist/backends/async-storage. Use for RN string-wire JSON state; always gate with useHydrated.
Compress a string-wire StateStorage with @stainless-code/persist/backends/compressed (gzip/deflate). Backend wrapper — compose with createStorage; stack compress-then-encrypt.
Cross-tab sync for backends without storage events via @stainless-code/persist/transport/crosstab (createBroadcastCrossTab). Wrap storage + pass crossTabEventTarget; call close() on teardown.
| name | persist-pinia |
| description | Persist a Pinia store instance with @stainless-code/persist (persistStore). Use when wiring Pinia option/setup stores to storage; hydrate applies via $state = (not $patch), with default shallow merge. |
| license | MIT |
| metadata | {"type":"composition","library":"@stainless-code/persist","library_version":"0.4.1","framework":"pinia"} |
| sources | ["stainless-code/persist:src/adapters/sources/pinia.ts","stainless-code/persist:docs/architecture.md"] |
@stainless-code/persist/sources/pinia maps a store instance onto persistSource. Hydrate applies via $state = (not $patch); default merge still shallow-spreads, so keys absent from the payload can remain. Subscribe uses $subscribe(…, { detached: true }) so the listener survives Vue effectScope stop.
const store = useX() and want reload survival for option or setup stores.bun add @stainless-code/persist pinia
pinia is an optional peer of /sources/pinia (Vue app + createPinia() still required by Pinia).
import { defineStore } from "pinia";
import { createJSONStorage } from "@stainless-code/persist";
import { persistStore } from "@stainless-code/persist/sources/pinia";
const usePrefs = defineStore("prefs", {
state: () => ({ theme: "light" as const }),
});
const store = usePrefs(); // instance, after pinia is active
const persist = persistStore(store, {
name: "app:prefs:v1",
storage: createJSONStorage(() => localStorage),
});
defineStore(...) / the factory instead of usePrefs() instance.$patch semantics on hydrate. Persist assigns $state after merge.persistStore. Import from /sources/pinia (or alias).setActivePinia / app.use(pinia). Same as any Pinia store use.persistStore(store, options) → PersistApi — store is a Pinia StorePersistApi: same as persistSourceSee also: react-persist / Vue hydration adapters for UI gating on async backends.