valtio-define by hairyf/skills
npx skills add https://github.com/hairyf/skills --skill valtio-define基于 valtio-define v1.0.1。这是一个基于 Valtio 的状态管理库,为 React 应用提供类似 Pinia 的 API。
valtio-define 提供了一个工厂函数,用于创建包含状态、操作和计算属性的响应式存储。它构建在 Valtio 之上,提供了类似 Pinia 的熟悉 API,并具备完整的 TypeScript 支持。
| 主题 | 描述 | 参考 |
|---|---|---|
| defineStore | 创建响应式存储的核心 API | core-define-store |
| useStore | 用于访问存储状态的 React 钩子 | core-use-store |
| 类型 | TypeScript 类型和接口 | core-types |
| 主题 | 描述 |
|---|
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 参考 |
|---|
| 订阅 | 订阅状态变化 | advanced-subscribe |
| 补丁 | 使用补丁操作更新状态 | advanced-patch |
| 信号 | 用于内联响应式值的 JSX 组件 | advanced-signal |
| 存储转状态 | 将存储转换为类似 useState 的钩子 | advanced-store-to-state |
| 主题 | 描述 | 参考 |
|---|---|---|
| 插件系统 | 使用插件扩展存储 | feature-plugin-system |
| 持久化插件 | 将状态持久化到存储 | feature-persistent-plugin |
import { defineStore, useStore } from 'valtio-define'
const store = defineStore({
state: () => ({ count: 0 }),
actions: {
increment() { this.count++ },
},
getters: {
doubled() { return this.count * 2 },
},
})
function Counter() {
const state = useStore(store)
return (
<div>
<div>Count: {state.count}</div>
<div>Doubled: {state.doubled}</div>
<button onClick={store.increment}>Increment</button>
</div>
)
}
每周安装量
500
代码仓库
GitHub 星标数
6
首次出现
2026年1月29日
安全审计
安装于
cursor498
claude-code463
trae457
gemini-cli51
github-copilot51
codex51
Based on valtio-define v1.0.1. A Valtio-based state management library with Pinia-like API for React applications.
valtio-define provides a factory function for creating reactive stores with state, actions, and getters. Built on top of Valtio, it offers a familiar API similar to Pinia with full TypeScript support.
| Topic | Description | Reference |
|---|---|---|
| defineStore | Core API for creating reactive stores | core-define-store |
| useStore | React hook for accessing store state | core-use-store |
| Types | TypeScript types and interfaces | core-types |
| Topic | Description | Reference |
|---|---|---|
| Subscriptions | Subscribe to state changes | advanced-subscribe |
| Patch | Update state with patch operations | advanced-patch |
| Signal | JSX component for inline reactive values | advanced-signal |
| Store to State | Convert store to useState-like hooks | advanced-store-to-state |
| Topic | Description | Reference |
|---|---|---|
| Plugin System | Extend stores with plugins | feature-plugin-system |
| Persistent Plugin | Persist state to storage | feature-persistent-plugin |
import { defineStore, useStore } from 'valtio-define'
const store = defineStore({
state: () => ({ count: 0 }),
actions: {
increment() { this.count++ },
},
getters: {
doubled() { return this.count * 2 },
},
})
function Counter() {
const state = useStore(store)
return (
<div>
<div>Count: {state.count}</div>
<div>Doubled: {state.doubled}</div>
<button onClick={store.increment}>Increment</button>
</div>
)
}
Weekly Installs
500
Repository
GitHub Stars
6
First Seen
Jan 29, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
cursor498
claude-code463
trae457
gemini-cli51
github-copilot51
codex51
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
106,200 周安装