tanstack-vue-store-skilld
npx skills add https://github.com/harlan-zw/vue-ecosystem-skills --skill tanstack-vue-store-skilld
Agent 安装分布
Skill 文档
TanStack/store @tanstack/vue-store
Version: 0.9.1 (Feb 2026) Deps: vue-demi@^0.14.10, @tanstack/store@0.9.1 Tags: latest: 0.9.1 (Feb 2026)
References: Docs â API reference, guides ⢠GitHub Issues â bugs, workarounds, edge cases ⢠GitHub Discussions â Q&A, patterns, recipes ⢠Releases â changelog, breaking changes, new APIs
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