Tanstack Vue Store Skilld

TanStack/store @tanstack/vue-store@0.11.0

Tags: latest: 0.11.0

References: Docs

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

tsCopy code
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