---
id: ssh2-valtio-define
name: "valtio-define"
url: https://skills.yangsir.net/skill/ssh2-valtio-define
author: hairyf
domain: ai-frontend-engineering
tags: ["valtio", "react-state-management", "proxy-based-state", "frontend-development", "javascript-libraries"]
install_count: 629
rating: 4.20 (20 reviews)
github: https://github.com/hairyf/skills
---

# valtio-define

> 掌握valtio-define的全面使用技巧，用于定义和管理Valtio状态。

**Stats**: 629 installs · 4.2/5 (20 reviews)

## Before / After 对比

### 精通Valtio Define，优化状态管理

## Readme

> Based on valtio-define v1.0.1. A Valtio-based state management library with Pinia-like API for React applications.

## Overview

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.

## Core References

| Topic | Description | Reference |
|-------|-------------|-----------|
| defineStore | Core API for creating reactive stores | [core-define-store](references/core-define-store.md) |
| useStore | React hook for accessing store state | [core-use-store](references/core-use-store.md) |
| Types | TypeScript types and interfaces | [core-types](references/core-types.md) |

## Advanced Features

| Topic | Description | Reference |
|-------|-------------|-----------|
| Subscriptions | Subscribe to state changes | [advanced-subscribe](references/advanced-subscribe.md) |
| Patch | Update state with patch operations | [advanced-patch](references/advanced-patch.md) |
| Signal | JSX component for inline reactive values | [advanced-signal](references/advanced-signal.md) |
| Store to State | Convert store to useState-like hooks | [advanced-store-to-state](references/advanced-store-to-state.md) |

## Features

| Topic | Description | Reference |
|-------|-------------|-----------|
| Plugin System | Extend stores with plugins | [feature-plugin-system](references/feature-plugin-system.md) |
| Persistent Plugin | Persist state to storage | [feature-persistent-plugin](references/feature-persistent-plugin.md) |

## Quick Start

```tsx
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>
  )
}
```


---
*Source: https://skills.yangsir.net/skill/ssh2-valtio-define*
*Markdown mirror: https://skills.yangsir.net/api/skill/ssh2-valtio-define/markdown*