tanstack-vue-store-skilld

Name: tanstack-vue-store-skilld
Author: skilld-dev

173stars8forks

How to install tanstack-vue-store-skilld?

skilld-dev/vue-ecosystem-skills/tanstack-vue-store-skilld

$npx -y skills add skilld-dev/vue-ecosystem-skills --skill tanstack-vue-store-skilld

Installs into the current project.

Summary

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.

Files · 1

View on GitHub

SKILL.md

1	# TanStack/store `@tanstack/vue-store@0.11.0`
2	Tags: latest: 0.11.0
3
4	References: [Docs](./references/docs/_INDEX.md)
5	## API Changes
6
7	This section documents version-specific API changes — prioritize recent major/minor releases.
8
9	- BREAKING: `new Store()` -> `createStore()` — v0.9.0 replaced the class constructor with a factory function for all store instantiations [source](./references/releases/@tanstack/vue-store@0.9.0.md)
10
11	- BREAKING: `new Derived()` -> `createStore(fn)` — v0.9.0 unified derived and simple state creation into the single `createStore` API [source](./references/releases/@tanstack/vue-store@0.9.0.md)
12
13	- BREAKING: `new Effect()` -> `store.subscribe()` — v0.9.0 removed the `Effect` class; side effects are now handled directly via store subscriptions [source](./references/releases/@tanstack/vue-store@0.9.0.md)
14
15	- NEW: `createStore(initialValue)` — now the standard way to initialize a store instance with a given initial state [source](./references/docs/quick-start.md)
16
17	- NEW: `createStore((prev) => next)` — creates a derived store that automatically updates when dependencies change, receiving the optional `prev` state [source](./references/docs/quick-start.md)
18
19	- NEW: `createAtom()` — creates a generic signal-based atom for granular reactivity, re-exported from `@tanstack/store` [source](./references/docs/reference/functions/createAtom.md)
20
21	- NEW: `createAsyncAtom()` — factory for creating reactive atoms from asynchronous functions or Promises [source](./references/docs/reference/functions/createAsyncAtom.md)
22
23	- NEW: `batch(fn)` — utility to group multiple state updates into a single notification cycle to optimize performance [source](./references/docs/reference/functions/batch.md)
24
25	- NEW: `flush()` — manually triggers all pending updates across stores for immediate state consistency [source](./references/docs/reference/functions/flush.md)
26
27	- NEW: `toObserver()` — utility to convert callback functions into a formal `Observer` object for subscriptions [source](./references/docs/reference/functions/toObserver.md)
28
29	- NEW: `shallow()` with expanded support — v0.9.1 added `Date`, `Map`, and `Set` comparison to the `shallow` utility to fix stale values in selectors
30
31	- NEW: `useStore` equality check — `useStore(store, selector, { equal })` now accepts a custom equality function for rendering control [source](./references/docs/framework/vue/reference/functions/useStore.md)
32
33	- CHANGED: `alien-signals` core — v0.9.0 switched internal reactivity to `alien-signals` for significantly improved performance [source](./references/releases/@tanstack/vue-store@0.9.0.md)
34
35	- NEW: `NoInfer` in `useStore` — improved TypeScript inference for selected state using the `NoInfer` utility in function signatures
36
37	Also changed: `ReadOnlyStore` class · `Subscribable` interface · `AtomOptions` with `compare` · `AsyncAtomState` type · `Subscription` object
38
39	## Best Practices
40
41	- Prefer `createStore()` over the deprecated `new Store()` constructor — aligns with v0.9.0+ idiomatic patterns and internal optimizations [source](./references/releases/@tanstack/vue-store@0.9.0.md)
42
43	- Use a factory function within `createStore()` for derived state — replaces the removed `Derived` class for better composition and efficient updates [source](./references/releases/@tanstack/vue-store@0.9.0.md)
44
45	```ts
46	const store = createStore({ count: 1 })
47	const doubled = createStore(() => store.state.count * 2)
48	```
49
50	- 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](./references/docs/framework/vue/reference/functions/useStore.md)
51
52	- 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
53
54	- Group multiple state updates within `batch()` — minimizes reactive triggers and improves performance in high-frequency update scenarios [source](./references/docs/reference/functions/batch.md)
55
56	- Use `createAsyncAtom()` to manage asynchronous data — automatically tracks loading, error, and data states in a standardized format [source](./references/docs/reference/functions/createAsyncAtom.md)
57
58	- 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](./references/releases/@tanstack/vue-store@0.9.0.md)
59
60	- Define and export stores from central modules — enables seamless state sharing

People who liked this also viewed

6 picks

Type

tanstack-vue-store-skilld

173stars8forks

View on GitHub

How to install tanstack-vue-store-skilld?

skilld-dev/vue-ecosystem-skills/tanstack-vue-store-skilld

$npx -y skills add skilld-dev/vue-ecosystem-skills --skill tanstack-vue-store-skilld

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# TanStack/store `@tanstack/vue-store@0.11.0`
2	Tags: latest: 0.11.0
3
4	References: [Docs](./references/docs/_INDEX.md)
5	## API Changes
6
7	This section documents version-specific API changes — prioritize recent major/minor releases.
8
9	- BREAKING: `new Store()` -> `createStore()` — v0.9.0 replaced the class constructor with a factory function for all store instantiations [source](./references/releases/@tanstack/vue-store@0.9.0.md)
10
11	- BREAKING: `new Derived()` -> `createStore(fn)` — v0.9.0 unified derived and simple state creation into the single `createStore` API [source](./references/releases/@tanstack/vue-store@0.9.0.md)
12
13	- BREAKING: `new Effect()` -> `store.subscribe()` — v0.9.0 removed the `Effect` class; side effects are now handled directly via store subscriptions [source](./references/releases/@tanstack/vue-store@0.9.0.md)
14
15	- NEW: `createStore(initialValue)` — now the standard way to initialize a store instance with a given initial state [source](./references/docs/quick-start.md)
16
17	- NEW: `createStore((prev) => next)` — creates a derived store that automatically updates when dependencies change, receiving the optional `prev` state [source](./references/docs/quick-start.md)
18
19	- NEW: `createAtom()` — creates a generic signal-based atom for granular reactivity, re-exported from `@tanstack/store` [source](./references/docs/reference/functions/createAtom.md)
20
21	- NEW: `createAsyncAtom()` — factory for creating reactive atoms from asynchronous functions or Promises [source](./references/docs/reference/functions/createAsyncAtom.md)
22
23	- NEW: `batch(fn)` — utility to group multiple state updates into a single notification cycle to optimize performance [source](./references/docs/reference/functions/batch.md)
24
25	- NEW: `flush()` — manually triggers all pending updates across stores for immediate state consistency [source](./references/docs/reference/functions/flush.md)
26
27	- NEW: `toObserver()` — utility to convert callback functions into a formal `Observer` object for subscriptions [source](./references/docs/reference/functions/toObserver.md)
28
29	- NEW: `shallow()` with expanded support — v0.9.1 added `Date`, `Map`, and `Set` comparison to the `shallow` utility to fix stale values in selectors
30
31	- NEW: `useStore` equality check — `useStore(store, selector, { equal })` now accepts a custom equality function for rendering control [source](./references/docs/framework/vue/reference/functions/useStore.md)
32
33	- CHANGED: `alien-signals` core — v0.9.0 switched internal reactivity to `alien-signals` for significantly improved performance [source](./references/releases/@tanstack/vue-store@0.9.0.md)
34
35	- NEW: `NoInfer` in `useStore` — improved TypeScript inference for selected state using the `NoInfer` utility in function signatures
36
37	Also changed: `ReadOnlyStore` class · `Subscribable` interface · `AtomOptions` with `compare` · `AsyncAtomState` type · `Subscription` object
38
39	## Best Practices
40
41	- Prefer `createStore()` over the deprecated `new Store()` constructor — aligns with v0.9.0+ idiomatic patterns and internal optimizations [source](./references/releases/@tanstack/vue-store@0.9.0.md)
42
43	- Use a factory function within `createStore()` for derived state — replaces the removed `Derived` class for better composition and efficient updates [source](./references/releases/@tanstack/vue-store@0.9.0.md)
44
45	```ts
46	const store = createStore({ count: 1 })
47	const doubled = createStore(() => store.state.count * 2)
48	```
49
50	- 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](./references/docs/framework/vue/reference/functions/useStore.md)
51
52	- 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
53
54	- Group multiple state updates within `batch()` — minimizes reactive triggers and improves performance in high-frequency update scenarios [source](./references/docs/reference/functions/batch.md)
55
56	- Use `createAsyncAtom()` to manage asynchronous data — automatically tracks loading, error, and data states in a standardized format [source](./references/docs/reference/functions/createAsyncAtom.md)
57
58	- 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](./references/releases/@tanstack/vue-store@0.9.0.md)
59
60	- Define and export stores from central modules — enables seamless state sharing

People who liked this also viewed

6 picks

Type