mcpField
V
valtio-define

valtio-define

github.com/hairyf开发26750 次安装2 周前更新
代码仓库

关于 valtio-define

valtio-define 是面向 React 开发者的 Valtio 状态管理库，采用类似 Pinia 的 API 创建响应式存储，支持状态、操作、getter 和 TypeScript。

主要功能

  1. 01响应式存储工厂
  2. 02状态、操作与 getter
  3. 03用于访问存储的 React Hook
  4. 04状态订阅与补丁更新
  5. 05插件与状态持久化

适用场景

  1. 01管理 React 应用的共享状态
  2. 02订阅存储变更
  3. 03通过插件持久化状态

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/hairyf/skills --skill valtio-define

安装后在 Claude Code 中输入/valtio-define确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

LICENSE.md
SYNC.md
references/
advanced-patch.md
advanced-signal.md
advanced-store-to-state.md
advanced-subscribe.md
core-define-store.md
core-types.md
core-use-store.md
feature-persistent-plugin.md
feature-plugin-system.md

详细介绍

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

概述

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

核心参考

主题描述参考
defineStore用于创建响应式 store 的核心 APIcore-define-store
useStore用于访问 store 状态的 React hookcore-use-store
TypesTypeScript 类型和接口core-types

高级功能

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

特性

主题描述参考
Plugin System使用插件扩展 storefeature-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>
  )
}

评论

支持 Markdown