tanstack-vue-store-skilld

📁 harlan-zw/vue-ecosystem-skills 📅 8 days ago
15
总安装量
13
周安装量
#22719
全站排名
安装命令
npx skills add https://github.com/harlan-zw/vue-ecosystem-skills --skill tanstack-vue-store-skilld

Agent 安装分布

claude-code 11
github-copilot 11
opencode 10
gemini-cli 10
amp 10
codex 10

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