valtio-define

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

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

基于valtio-define v1.0.1。这是一个基于Valtio的状态管理库，为React应用提供类Pinia风格的API。

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.

valtio-define提供一个工厂函数，用于创建包含state、actions和getters的响应式store。它构建在Valtio之上，提供类似Pinia的熟悉API，并完全支持TypeScript。

Core References

核心参考

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

主题	描述	参考文档
defineStore	创建响应式store的核心API	core-define-store
useStore	用于访问store状态的React hook	core-use-store
Types	TypeScript类型和接口	core-types

Advanced Features

高级功能

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

主题	描述	参考文档
Subscriptions	订阅状态变更	advanced-subscribe
Patch	使用patch操作更新状态	advanced-patch
Signal	用于内联响应式值的JSX组件	advanced-signal
Store to State	将store转换为类似useState的hooks	advanced-store-to-state

Features

功能特性

Topic	Description	Reference
Plugin System	Extend stores with plugins	feature-plugin-system
Persistent Plugin	Persist state to storage	feature-persistent-plugin

主题	描述	参考文档
Plugin System	使用插件扩展store	feature-plugin-system
Persistent Plugin	将状态持久化到存储中	feature-persistent-plugin

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

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