valtio-define

valtio-define v1.0.1 に基づいています。React アプリケーション向けに、Pinia のような API を備えた、Valtio ベースの状態管理ライブラリです。

概要

valtio-define は、状態、アクション、ゲッターを備えたリアクティブなストアを作成するファクトリー関数を提供します。Valtio を基盤としており、TypeScript を完全にサポートしながら、Pinia に似た使い慣れた API を提供します。

コアリファレンス

トピック	説明	リファレンス
defineStore	リアクティブなストアを作成するコア API	core-define-store
useStore	ストアの状態にアクセスする React フック	core-use-store
Types	TypeScript の型とインターフェース	core-types

高度な機能

トピック	説明	リファレンス
Subscriptions	状態の変更を購読する	advanced-subscribe
Patch	パッチ操作で状態を更新する	advanced-patch
Signal	インラインのリアクティブな値を表示する JSX コンポーネント	advanced-signal
Store to State	ストアを useState のようなフックに変換する	advanced-store-to-state

機能

トピック	説明	リファレンス
Plugin System	プラグインでストアを拡張する	feature-plugin-system
Persistent Plugin	状態をストレージに永続化する	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>
  )
}