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 singlecreateStoreAPI source -
BREAKING:
new Effect()->store.subscribe()— v0.9.0 removed theEffectclass; 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 optionalprevstate source -
NEW:
createAtom()— creates a generic signal-based atom for granular reactivity, re-exported from@tanstack/storesource -
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 formalObserverobject for subscriptions source -
NEW:
shallow()with expanded support — v0.9.1 addedDate,Map, andSetcomparison to theshallowutility to fix stale values in selectors -
NEW:
useStoreequality check —useStore(store, selector, { equal })now accepts a custom equality function for rendering control source -
CHANGED:
alien-signalscore — v0.9.0 switched internal reactivity toalien-signalsfor significantly improved performance source -
NEW:
NoInferinuseStore— improved TypeScript inference for selected state using theNoInferutility in function signatures
Also changed: ReadOnlyStore class · Subscribable interface · AtomOptions with compare · AsyncAtomState type · Subscription object
Best Practices
-
Prefer
createStore()over the deprecatednew Store()constructor — aligns with v0.9.0+ idiomatic patterns and internal optimizations source -
Use a factory function within
createStore()for derived state — replaces the removedDerivedclass 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
shallowequality inuseStore()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 removednew 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
comparefunction inAtomOptionsfor complex state — allows fine-grained control over when an atom's value is considered "changed" to optimize downstream computations source -
Rely on
NoInferinuseStoreselectors for accurate type safety — ensures TypeScript correctly infers the state type without being influenced by the return type of the selector