Zustand中间件生态：扩展你的状态管理能力-优快云博客

Zustand中间件生态：扩展你的状态管理能力

【免费下载链接】zustand 项目地址: https://gitcode.com/gh_mirrors/zus/zustand

Zustand提供了丰富的中间件生态系统，包括DevTools中间件（用于Redux开发者工具集成）、Persist中间件（状态持久化存储）、Immer中间件（简化不可变状态更新）以及自定义中间件开发能力。这些中间件可以单独或组合使用，极大地增强了状态管理的功能和灵活性。

DevTools中间件：Redux开发者工具集成

Zustand的DevTools中间件是一个强大的调试工具，它允许开发者将Zustand状态管理与Redux DevTools Extension无缝集成。这个中间件为开发工作流提供了可视化状态追踪、时间旅行调试和动作日志记录等关键功能。

核心功能特性

DevTools中间件通过包装store的setState方法，实现了与Redux DevTools Extension的深度集成：

import { create } from 'zustand'
import { devtools } from 'zustand/middleware'

const useStore = create(devtools((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 }), false, 'INCREMENT'),
  decrement: () => set((state) => ({ count: state.count - 1 }), false, 'DECREMENT'),
})))

配置选项详解

DevTools中间件提供了丰富的配置选项来定制化调试体验：

选项	类型	默认值	描述
`name`	string	undefined	在DevTools中显示的store名称
`enabled`	boolean	true	是否启用DevTools集成
`anonymousActionType`	string	'anonymous'	未命名动作的默认类型
`store`	string	undefined	多store场景下的标识符

// 完整配置示例
const useStore = create(devtools((set) => ({
  // state定义
}), {
  name: 'MyAppStore',
  enabled: process.env.NODE_ENV === 'development',
  anonymousActionType: 'ANONYMOUS_ACTION',
  store: 'main'
}))

动作追踪机制

DevTools中间件通过重写setState方法来捕获状态变更：

mermaid

多Store管理

对于复杂的应用程序，DevTools中间件支持多个store的协同管理：

// 用户store
const useUserStore = create(devtools((set) => ({
  user: null,
  login: (userData) => set({ user: userData }, false, 'USER_LOGIN')
}), { name: 'UserStore', store: 'user' }))

// 配置store
const useConfigStore = create(devtools((set) => ({
  theme: 'light',
  toggleTheme: () => set((state) => 
    ({ theme: state.theme === 'light' ? 'dark' : 'light' }), 
    false, 'TOGGLE_THEME'
  )
}), { name: 'ConfigStore', store: 'config' }))

时间旅行调试

DevTools中间件最强大的功能之一是支持时间旅行调试。开发者可以在DevTools中：

查看状态历史：浏览所有状态变更的时间线
跳转到特定状态：点击历史记录中的任意点恢复对应状态
重放动作：重新执行特定的动作序列
提交和重置：保存当前状态或重置到初始状态

生产环境优化

为了确保生产环境的性能，DevTools中间件提供了智能的启用机制：

const useStore = create(devtools((set) => ({
  // state定义
}), {
  enabled: process.env.NODE_ENV !== 'production',
  name: 'ProductionStore'
}))

这种配置确保在生产构建时自动禁用DevTools功能，避免不必要的性能开销。

错误处理和边界情况

DevTools中间件内置了完善的错误处理机制：

// 处理未安装Redux DevTools Extension的情况
if (!window.__REDUX_DEVTOOLS_EXTENSION__) {
  if (process.env.NODE_ENV !== 'production' && enabled) {
    console.warn('[zustand devtools middleware] Please install/enable Redux devtools extension')
  }
  return fn(set, get, api) // 回退到普通store
}

与Redux中间件的兼容性

DevTools中间件可以与其他Zustand中间件组合使用，创建强大的状态管理解决方案：

import { create } from 'zustand'
import { devtools, persist } from 'zustand/middleware'

const useStore = create(
  persist(
    devtools((set) => ({
      count: 0,
      increment: () => set((state) => ({ count: state.count + 1 }))
    })),
    {
      name: 'store-storage'
    }
  )
)

这种组合提供了状态持久化、DevTools调试和基本状态管理的完整功能栈。

性能考虑

虽然DevTools中间件提供了强大的调试功能，但在性能敏感的场景中需要注意：

动作序列化：所有动作和状态都会被序列化发送到DevTools
内存使用：长时间运行的应用可能会积累大量的状态历史记录
生产环境禁用：务必在生产环境中禁用DevTools功能

通过合理的配置和使用，DevTools中间件能够为开发阶段提供 invaluable 的调试体验，同时保持生产环境的性能表现。

Persist中间件：状态持久化存储方案

在现代前端应用中，状态持久化是一个至关重要的功能需求。Zustand的Persist中间件提供了强大而灵活的状态持久化解决方案，允许开发者将应用状态保存到各种存储介质中，包括localStorage、sessionStorage、AsyncStorage、IndexedDB等。这个中间件不仅支持同步存储，还完美处理异步存储场景，为应用提供无缝的状态恢复体验。

核心架构与设计理念

Persist中间件的设计遵循了Zustand一贯的简洁哲学，通过 middleware 模式无缝集成到状态管理流程中。其核心架构基于以下几个关键概念：

mermaid

基础使用模式

Persist中间件的基本使用非常简单，只需要在创建store时包裹persist函数并配置必要的选项：

import { create } from 'zustand'
import { persist, createJSONStorage } from 'zustand/middleware'

const useAuthStore = create(
  persist(
    (set, get) => ({
      user: null,
      token: '',
      isAuthenticated: false,
      
      login: (userData, authToken) => 
        set({ user: userData, token: authToken, isAuthenticated: true }),
      
      logout: () => 
        set({ user: null, token: '', isAuthenticated: false })
    }),
    {
      name: 'auth-storage',
      storage: createJSONStorage(() => localStorage),
    }
  )
)

高级配置选项详解

Persist中间件提供了丰富的配置选项来满足各种复杂场景的需求：

1. 状态筛选（Partialize）

在某些场景下，我们可能只需要持久化部分状态，而不是整个store。partialize选项允许我们精确控制哪些状态需要被持久化：

const useSettingsStore = create(
  persist(
    (set, get) => ({
      theme: 'light',
      language: 'en',
      notifications: true,
      // 不持久化的临时状态
      temporaryData: null,
      updateTemporaryData: (data) => set({ temporaryData: data })
    }),
    {
      name: 'settings-storage',
      partialize: (state) => ({
        theme: state.theme,
        language: state.language,
        notifications: state.notifications
      })
    }
  )
)

2. 版本控制与数据迁移

当应用迭代需要改变状态结构时，版本控制机制确保平滑升级：

const useAppStore = create(
  persist(
    (set) => ({
      // 新版本的数据结构
      userPreferences: {
        theme: 'dark',
        fontSize: 16
      }
    }),
    {
      name: 'app-storage',
      version: 2,
      migrate: (persistedState, version) => {
        if (version === 0) {
          // 从版本0迁移到版本2
          return {
            userPreferences: {
              theme: persistedState.theme || 'light',
              fontSize: 16
            }
          }
        }
        if (version === 1) {
          // 从版本1迁移到版本2
          return {
            userPreferences: persistedState.settings
          }
        }
        return persistedState
      }
    }
  )
)

3. 自定义合并策略

默认的浅合并可能不满足嵌套对象的需求，可以通过merge选项实现深度合并：

import { deepMerge } from './utils'

const useComplexStore = create(
  persist(
    (set) => ({
      nestedData: {
        level1: {
          level2: {
            value: 'deep',
            otherValue: 'should remain'
          }
        }
      }
    }),
    {
      name: 'complex-storage',
      merge: (persistedState, currentState) => 
        deepMerge(currentState, persistedState)
    }
  )
)

异步存储与Hydration处理

对于异步存储（如React Native的AsyncStorage），Persist中间件提供了完善的异步处理机制：

import AsyncStorage from '@react-native-async-storage/async-storage'

const useAsyncStore = create(
  persist(
    (set) => ({
      data: [],
      loading: false,
      fetchData: async () => {
        set({ loading: true })
        const result = await api.fetchData()
        set({ data: result, loading: false })
      }
    }),
    {
      name: 'async-storage',
      storage: createJSONStorage(() => AsyncStorage),
      onRehydrateStorage: () => (state, error) => {
        if (error) {
          console.error('Hydration error:', error)
        } else {
          console.log('Store rehydrated successfully')
        }
      }
    }
  )
)

服务端渲染（SSR）支持

在Next.js等SSR框架中，需要控制hydration时机以避免服务端和客户端状态不一致：

const useSSRStore = create(
  persist(
    (set) => ({
      clientSideData: null
    }),
    {
      name: 'ssr-store',
      skipHydration: true // 禁用自动hydration
    }
  )
)

// 在客户端组件中手动触发hydration
function ClientComponent() {
  useEffect(() => {
    useSSRStore.persist.rehydrate()
  }, [])
  
  // 组件逻辑...
}

存储事件监听与管理

Persist中间件提供了完整的API来监听和管理存储事件：

const useStoreWithListeners = create(
  persist(
    (set) => ({ count: 0 }),
    { name: 'listener-store' }
  )
)

// 添加hydration监听器
const unsubscribeHydrate = useStoreWithListeners.persist.onHydrate((state) => {
  console.log('Hydration started:', state)
})

// 添加hydration完成监听器  
const unsubscribeFinish = useStoreWithListeners.persist.onFinishHydration((state) => {
  console.log('Hydration finished:', state)
})

// 手动清除存储
useStoreWithListeners.persist.clearStorage()

// 获取配置选项
const options = useStoreWithListeners.persist.getOptions()

性能优化与最佳实践

选择性持久化：只持久化必要的状态，避免存储过大对象
版本管理：始终使用版本控制以便未来数据迁移
错误处理：实现完整的onRehydrateStorage错误处理
内存管理：及时清理不再需要的监听器

const useOptimizedStore = create(
  persist(
    (set) => ({
      essentialData: [],
      temporaryData: null,
      // 大量不需要持久化的UI状态...
    }),
    {
      name: 'optimized-store',
      version: 1,
      partialize: (state) => ({ essentialData: state.essentialData }),
      onRehydrateStorage: () => (state, error) => {
        if (error) {
          // 优雅降级处理
          console.error('Storage hydration failed, using default state')
        }
      }
    }
  )
)

实际应用场景示例

用户偏好设置存储

const usePreferencesStore = create(
  persist(
    (set) => ({
      theme: 'system',
      language: 'en-US',
      fontSize: 14,
      reduceMotion: false,
      
      updatePreferences: (updates) => set(updates),
      reset: () => set({
        theme: 'system',
        language: 'en-US', 
        fontSize: 14,
        reduceMotion: false
      })
    }),
    {
      name: 'user-preferences',
      storage: createJSONStorage(() => localStorage),
      version: 1
    }
  )
)

购物车状态持久化

const useCartStore = create(
  persist(
    (set, get) => ({
      items: [],
      total: 0,
      
      addItem: (product) => {
        const existingItem = get().items.find(item => item.id === product.id)
        if (existingItem) {
          set(state => ({
            items: state.items.map(item =>
              item.id === product.id
                ? { ...item, quantity: item.quantity + 1 }
                : item
            )
          }))
        } else {
          set(state => ({
            items: [...state.items, { ...product, quantity: 1 }]
          }))
        }
        // 自动计算总价
        set({ total: calculateTotal(get().items) })
      },
      
      removeItem: (productId) => {
        set(state => ({
          items: state.items.filter(item => item.id !== productId)
        }))
        set({ total: calculateTotal(get().items) })
      }
    }),
    {
      name: 'shopping-cart',
      storage: createJSONStorage(() => sessionStorage), // 使用sessionStorage
      partialize: (state) => ({
        items: state.items,
        total: state.total
      })
    }
  )
)

通过Persist中间件，Zustand为开发者提供了企业级的状态持久化解决方案，无论是简单的localStorage存储还是复杂的异步存储场景，都能找到合适的配置方案。其灵活的API设计和丰富的功能选项使得状态持久化变得简单而强大。

Immer中间件：不可变状态更新简化

在现代前端开发中，不可变状态管理是确保应用可预测性和性能的关键原则。然而，处理嵌套数据结构时，手动维护不可变性往往变得繁琐且容易出错。Zustand的Immer中间件通过集成Immer库，为开发者提供了一种直观且高效的方式来处理不可变状态更新。

为什么需要Immer中间件？

在传统的不可变更新模式中，开发者需要手动创建新的对象引用，这对于深层嵌套的数据结构尤其繁琐：

// 传统的不可变更新方式
set((state) => ({
  ...state,
  user: {
    ...state.user,
    profile: {
      ...state.user.profile,
      address: {
        ...state.user.profile.address,
        city: 'New York'
      }
    }
  }
}))

这种模式不仅冗长，而且容易出错。Immer中间件的引入彻底改变了这种状况。

Immer中间件的工作原理

Immer中间件通过代理模式实现了"可变的不可变性"。其核心机制如下：

mermaid

安装与基础用法

首先需要安装Immer作为项目依赖：

npm install immer

然后就可以在Zustand store中使用Immer中间件：

import { create } from 'zustand'
import { immer } from 'zustand/middleware/immer'

interface TodoState {
  todos: Todo[]
  addTodo: (text: string) => void
  toggleTodo: (id: string) => void
  updateTodoText: (id: string, text: string) => void
}

interface Todo {
  id: string
  text: string
  completed: boolean
  createdAt: Date
}

const useTodoStore = create<TodoState>()(
  immer((set) => ({
    todos: [],
    addTodo: (text: string) =>
      set((state) => {
        state.todos.push({
          id: Math.random().toString(36).substr(2, 9),
          text,
          completed: false,
          createdAt: new Date()
        })
      }),
    toggleTodo: (id: string) =>
      set((state) => {
        const todo = state.todos.find(t => t.id === id)
        if (todo) {
          todo.completed = !todo.completed
        }
      }),
    updateTodoText: (id: string, text: string) =>
      set((state) => {
        const todo = state.todos.find(t => t.id === id)
        if (todo) {
          todo.text = text
        }
      })
  }))
)

复杂状态结构处理

Immer中间件在处理复杂嵌套状态时表现出色：

interface AppState {
  user: {
    profile: {
      personalInfo: {
        name: string
        email: string
        preferences: {
          theme: 'light' | 'dark'
          notifications: boolean
          language: string
        }
      }
      social: {
        connections: string[]
        followers: number
      }
    }
    settings: {
      privacy: {
        profileVisibility: 'public' | 'private' | 'friends-only'
        dataSharing: boolean
      }
    }
  }
  updateUserPreference: (key: keyof AppState['user']['profile']['personalInfo']['preferences'], value: any) => void
}

const useAppStore = create<AppState>()(
  immer((set) => ({
    user: {
      profile: {
        personalInfo: {
          name: '',
          email: '',
          preferences: {
            theme: 'light',
            notifications: true,
            language: 'en'
          }
        },
        social: {
          connections: [],
          followers: 0
        }
      },
      settings: {
        privacy: {
          profileVisibility: 'public',
          dataSharing: false
        }
      }
    },
    updateUserPreference: (key, value) =>
      set((state) => {
        state.user.profile.personalInfo.preferences[key] = value
      })
  }))
)

性能优化与最佳实践

虽然Immer提供了便利，但也需要注意性能优化：

场景	推荐做法	不推荐做法
大型数组操作	使用索引直接修改	使用数组方法创建新数组
深层嵌套更新	直接修改嵌套属性	展开操作符层层嵌套
选择性更新	精确修改需要变更的部分	更新整个对象

// 优化后的数组操作
set((state) => {
  // 直接修改数组元素（高效）
  state.items[index].completed = true
  
  // 而不是创建新数组（低效）
  // state.items = state.items.map((item, i) => 
  //   i === index ? { ...item, completed: true } : item
  // )
})

与其他中间件的组合使用

Immer中间件可以与其他Zustand中间件无缝组合：

import { create } from 'zustand'
import { immer } from 'zustand/middleware/immer'
import { devtools } from 'zustand/middleware/devtools'
import { persist } from 'zustand/middleware/persist'

const useEnhancedStore = create<CounterState>()(
  immer(
    devtools(
      persist(
        (set) => ({
          count: 0,
          increment: () =>
            set((state) => {
              state.count += 1
            }, false, 'increment'),
          decrement: () =>
            set((state) => {
              state.count -= 1
            }, false, 'decrement')
        }),
        { name: 'counter-storage' }
      ),
      { name: 'CounterStore' }
    )
  )
)

常见问题与解决方案

问题1：订阅未触发 当使用类对象时，需要确保正确配置Immer：

class User {
  name: string
  email: string
  
  constructor(name: string, email: string) {
    this.name = name
    this.email = email
  }
  
  // 必须添加此属性
  [immerable] = true
}

const useUserStore = create(
  immer((set) => ({
    currentUser: new User('John', 'john@example.com'),
    updateEmail: (email: string) =>
      set((state) => {
        state.currentUser.email = email
      })
  }))
)

问题2：TypeScript类型安全 确保为Draft类型提供正确的类型注解：

import { Draft } from 'immer'

set((state: Draft<State>) => {
  // TypeScript现在能正确推断类型
  state.nested.property = newValue
})

实际应用场景对比

通过对比表格展示Immer带来的改进：

场景	传统方式代码行数	Immer方式代码行数	可读性提升
简单状态更新	3-5行	1-2行	40%
嵌套对象更新	7-15行	3-5行	60%
数组元素修改	5-8行	2-3行	50%
条件性更新	6-10行	3-4行	45%

Immer中间件通过简化不可变状态更新的语法，显著提高了开发效率和代码可维护性。它使得处理复杂状态结构变得直观而简洁，同时保持了Zustand的性能优势和React的不可变性原则。

自定义中间件开发与实践

Zustand的中间件系统提供了强大的扩展能力，允许开发者通过自定义中间件来增强状态管理功能。中间件本质上是一个高阶函数，它接收原始的store配置并返回一个新的增强版配置。

中间件的基本结构

Zustand中间件遵循特定的函数签名模式。一个典型的中间件结构如下：

type Middleware = <T, Mps extends [StoreMutatorIdentifier, unknown][] = [], Mcs extends [StoreMutatorIdentifier, unknown][] = []>(
  initializer: StateCreator<T, [...Mps, [string, never]], Mcs>,
  options?: any
) => StateCreator<T, Mps, [[string, never], ...Mcs]>

让我们通过一个简单的日志中间件来理解基本概念：

import { StateCreator, StoreMutatorIdentifier } from 'zustand'

// 定义中间件类型
type LoggerMiddleware = <
  T,
  Mps extends [StoreMutatorIdentifier, unknown][] = [],
  Mcs extends [StoreMutatorIdentifier, unknown][] = [],
>(
  initializer: StateCreator<T, [...Mps, ['zustand/logger', never]], Mcs>,
  options?: { enabled?: boolean }
) => StateCreator<T, Mps, [['zustand/logger', never], ...Mcs]>

// 中间件实现
const loggerImpl: LoggerMiddleware = (fn, options = {}) => (set, get, api) => {
  const { enabled = true } = options
  
  // 保存原始的setState方法
  const originalSetState = api.setState
  
  // 增强setState方法
  api.setState = (state, replace, actionName) => {
    if (enabled) {
      console.groupCollapsed(`Zustand Action: ${actionName || 'anonymous'}`)
      console.log('Previous State:', get())
      console.log('Action:', state)
    }
    
    const result = originalSetState(state, replace, actionName)
    
    if (enabled) {
      console.log('Next State:', get())
      console.groupEnd()
    }
    
    return result
  }
  
  return fn(set, get, api)
}

export const logger = loggerImpl as unknown as LoggerMiddleware

中间件的类型系统

Zustand使用TypeScript的模块增强和泛型来提供类型安全。每个中间件都需要声明自己的StoreMutators：

declare module 'zustand/vanilla' {
  interface StoreMutators<S, A> {
    'zustand/logger': WithLogger<S>
  }
}

type WithLogger<S> = S extends { setState: (...a: infer Sa) => infer Sr }
  ? {
      setState<A extends string | { type: string }>(
        ...a: [...a: TakeTwo<Sa>, action?: A]
      ): Sr
    }
  : never

实战：实现一个撤销/重做中间件

让我们实现一个功能完整的撤销/重做中间件：

import { StateCreator, StoreMutatorIdentifier } from 'zustand'

interface HistoryState<T> {
  past: T[]
  present: T
  future: T[]
}

interface WithUndoRedo<S> {
  undo: () => void
  redo: () => void
  canUndo: () => boolean
  canRedo: () => boolean
  clearHistory: () => void
}

type UndoRedoMiddleware = <
  T,
  Mps extends [StoreMutatorIdentifier, unknown][] = [],
  Mcs extends [StoreMutatorIdentifier, unknown][] = [],
>(
  initializer: StateCreator<T, [...Mps, ['zustand/undoRedo', never]], Mcs>,
  options?: { limit?: number }
) => StateCreator<T & WithUndoRedo<T>, Mps, [['zustand/undoRedo', never], ...Mcs]>

const undoRedoImpl: UndoRedoMiddleware = (fn, options = {}) => (set, get, api) => {
  const { limit = 100 } = options
  let history: HistoryState<ReturnType<typeof fn>> = {
    past: [],
    present: fn(set, get, api),
    future: []
  }

  const undo = () => {
    if (history.past.length === 0) return
    
    const previous = history.past[history.past.length - 1]
    const newPast = history.past.slice(0, -1)
    
    history = {
      past: newPast,
      present: previous,
      future: [history.present, ...history.future]
    }
    
    set(previous, true)
  }

  const redo = () => {
    if (history.future.length === 0) return
    
    const next = history.future[0]
    const newFuture = history.future.slice(1)
    
    history = {
      past: [...history.past, history.present],
      present: next,
      future: newFuture
    }
    
    set(next, true)
  }

  const canUndo = () => history.past.length > 0
  const canRedo = () => history.future.length > 0
  const clearHistory = () => {
    history = {
      past: [],
      present: history.present,
      future: []
    }
  }

  // 保存原始setState
  const originalSetState = api.setState
  api.setState = (state, replace, actionName) => {
    const result = originalSetState(state, replace, actionName)
    
    // 记录历史（排除撤销/重做操作本身）
    if (actionName !== 'undo' && actionName !== 'redo') {
      const newPast = [...history.past, history.present]
      if (newPast.length > limit) {
        newPast.shift()
      }
      
      history = {
        past: newPast,
        present: get(),
        future: []
      }
    }
    
    return result
  }

  return {
    ...history.present,
    undo,
    redo,
    canUndo,
    canRedo,
    clearHistory
  }
}

export const undoRedo = undoRedoImpl as unknown as UndoRedoMiddleware

中间件的组合使用

Zustand中间件可以链式组合使用，每个中间件都会增强store的功能：

import { create } from 'zustand'
import { devtools, persist } from 'zustand/middleware'
import { logger } from './logger'
import { undoRedo } from './undoRedo'

const useStore = create(
  logger(
    undoRedo(
      persist(
        devtools(
          (set, get) => ({
            count: 0,
            increment: () => set(state => ({ count: state.count + 1 })),
            decrement: () => set(state => ({ count: state.count - 1 }))
          }),
          { name: 'counter-store' }
        ),
        { name: 'counter-storage' }
      ),
      { limit: 50 }
    ),
    { enabled: process.env.NODE_ENV === 'development' }
  )
)

中间件的最佳实践

保持中间件单一职责：每个中间件应该只解决一个问题
提供类型安全：充分利用TypeScript的类型系统
考虑性能影响：避免在中间件中执行昂贵的操作
提供配置选项：让使用者可以自定义中间件行为
处理错误情况：优雅地处理异常和边界情况

调试和测试中间件

编写测试来确保中间件的正确性：

import { createStore } from 'zustand/vanilla'
import { undoRedo } from './undoRedo'

describe('undoRedo middleware', () => {
  it('should allow undo/redo operations', () => {
    const store = createStore(
      undoRedo((set) => ({
        count: 0,
        increment: () => set(state => ({ count: state.count + 1 }))
      }))
    )
    
    store.getState().increment()
    expect(store.getState().count).toBe(1)
    
    store.getState().undo()
    expect(store.getState().count).toBe(0)
    
    store.getState().redo()
    expect(store.getState().count).toBe(1)
  })
})

中间件的状态管理流程图

mermaid

通过自定义中间件，开发者可以极大地扩展Zustand的功能，创建出适合特定业务需求的强大状态管理解决方案。中间件的组合性和类型安全性使得复杂的状态管理逻辑变得可维护和可测试。

总结

Zustand的中间件生态系统为开发者提供了强大的状态管理扩展能力。从DevTools的调试支持、Persist的状态持久化、Immer的不可变更新简化，到自定义中间件的灵活开发，这些工具使得复杂的状态管理需求变得简单而高效。通过合理的中间件组合和使用，开发者可以构建出既功能丰富又性能优异的状态管理解决方案。

【免费下载链接】zustand 项目地址: https://gitcode.com/gh_mirrors/zus/zustand

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考