tanstack-vue-store-skilld

Framework agnostic type-safe store w/ reactive framework adapters. ALWAYS use when writing code importing "@tanstack/vue-store". Consult for debugging, best practices, or modifying @tanstack/vue-store, tanstack/vue-store, tanstack vue-store, tanstack vue store, store.

Safety Notice

This listing is imported from skills.sh public index metadata. Review upstream SKILL.md and repository scripts before running.

Copy this and send it to your AI assistant to learn

Install skill "tanstack-vue-store-skilld" with this command: npx skills add harlan-zw/vue-ecosystem-skills/harlan-zw-vue-ecosystem-skills-tanstack-vue-store-skilld

TanStack/store @tanstack/vue-store

Framework agnostic type-safe store w/ reactive framework adapters

Version: 0.9.2 (Mar 2026) Deps: vue-demi@^0.14.10, @tanstack/store@0.9.2 Tags: latest: 0.9.2 (Mar 2026)

References: Docs — API reference, guides

API Changes

This section documents version-specific API changes — prioritize recent major/minor releases.

  • BREAKING: new Store() -> createStore() — v0.9.0 replaced the class constructor with a factory function for all store instantiations source

  • BREAKING: new Derived() -> createStore(fn) — v0.9.0 unified derived and simple state creation into the single createStore API source

  • BREAKING: new Effect() -> store.subscribe() — v0.9.0 removed the Effect class; side effects are now handled directly via store subscriptions source

  • NEW: createStore(initialValue) — now the standard way to initialize a store instance with a given initial state source

  • NEW: createStore((prev) => next) — creates a derived store that automatically updates when dependencies change, receiving the optional prev state source

  • NEW: createAtom() — creates a generic signal-based atom for granular reactivity, re-exported from @tanstack/store source

  • NEW: createAsyncAtom() — factory for creating reactive atoms from asynchronous functions or Promises source

  • NEW: batch(fn) — utility to group multiple state updates into a single notification cycle to optimize performance source

  • NEW: flush() — manually triggers all pending updates across stores for immediate state consistency source

  • NEW: toObserver() — utility to convert callback functions into a formal Observer object for subscriptions source

  • NEW: shallow() with expanded support — v0.9.1 added Date, Map, and Set comparison to the shallow utility to fix stale values in selectors

  • NEW: useStore equality check — useStore(store, selector, { equal }) now accepts a custom equality function for rendering control source

  • CHANGED: alien-signals core — v0.9.0 switched internal reactivity to alien-signals for significantly improved performance source

  • NEW: NoInfer in useStore — improved TypeScript inference for selected state using the NoInfer utility in function signatures

Also changed: ReadOnlyStore class · Subscribable interface · AtomOptions with compare · AsyncAtomState type · Subscription object

Best Practices

  • Prefer createStore() over the deprecated new Store() constructor — aligns with v0.9.0+ idiomatic patterns and internal optimizations source

  • Use a factory function within createStore() for derived state — replaces the removed Derived class for better composition and efficient updates source

const store = createStore({ count: 1 })
const doubled = createStore(() => store.state.count * 2)
  • Pass a selector function to useStore() for fine-grained reactivity — ensures the Vue component only re-renders when the specific selected slice of state changes source

  • Leverage the default shallow equality in useStore() for object selections — prevents unnecessary re-renders when your selector returns new object/array references with identical values

  • Group multiple state updates within batch() — minimizes reactive triggers and improves performance in high-frequency update scenarios source

  • Use createAsyncAtom() to manage asynchronous data — automatically tracks loading, error, and data states in a standardized format source

  • Use store.subscribe() for side effects instead of the removed new Effect() — provides a cleaner, lifecycle-aware API for observing state changes outside of components source

  • Define and export stores from central modules — enables seamless state sharing across multiple Vue components and facilitates better testability source

  • Provide a custom compare function in AtomOptions for complex state — allows fine-grained control over when an atom's value is considered "changed" to optimize downstream computations source

  • Rely on NoInfer in useStore selectors for accurate type safety — ensures TypeScript correctly infers the state type without being influenced by the return type of the selector

Source Transparency

This detail page is rendered from real SKILL.md content. Trust labels are metadata-based hints, not a safety guarantee.

Related Skills

Related by shared tags or category signals.

General

vue-skilld

No summary provided by upstream source.

Repository SourceNeeds Review
General

pinia-skilld

No summary provided by upstream source.

Repository SourceNeeds Review
General

vueuse-core-skilld

No summary provided by upstream source.

Repository SourceNeeds Review
General

vue-router-skilld

No summary provided by upstream source.

Repository SourceNeeds Review