valtio-define

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

概要

valtio-defineは、ステート、アクション、ゲッターを備えたリアクティブなストアを作成するためのファクトリ関数を提供します。Valtioの上に構築されており、Pinia と類似した使い慣れたAPI、および完全なTypeScript サポートを提供します。

コア リファレンス

高度な機能

機能

クイックスタート

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