ドキュメント

はじめに

インストール

npm または yarn を使用して Zustand をインストールします：

npm install zustand # or yarn add zustand # or pnpm add zustand

最初のストア

Store の作成は簡単です。これはシンプルなカウンターの例です：

import { create } from 'zustand'

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
}))

基本的な使い方

React コンポーネントで store を使用します：

function Counter() {
  const count = useStore((state) => state.count)
  const increment = useStore((state) => state.increment)
  const decrement = useStore((state) => state.decrement)
  const reset = useStore((state) => state.reset)

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <button onClick={reset}>Reset</button>
    </div>
  )
}