Zustand 状态管理

灵动桌面框架使用 Zustand 5.0+ 作为全局状态管理方案，轻量、简洁、TypeScript 友好。

基本用法

定义 Store

// src/store/app.ts
import { create } from 'zustand'

interface AppState {
  isDark: boolean
  sidebarCollapsed: boolean
  toggleTheme: () => void
  toggleSidebar: () => void
}

export const useAppStore = create<AppState>((set) => ({
  isDark: false,
  sidebarCollapsed: false,
  toggleTheme: () => set((s) => ({ isDark: !s.isDark })),
  toggleSidebar: () => set((s) => ({ sidebarCollapsed: !s.sidebarCollapsed })),
}))

在组件中使用

import { useAppStore } from '@/store'

function ThemeToggle() {
  const isDark = useAppStore((s) => s.isDark)
  const toggleTheme = useAppStore((s) => s.toggleTheme)

  return (
    <Switch
      checked={isDark}
      onChange={toggleTheme}
      checkedChildren="暗"
      unCheckedChildren="亮"
    />
  )
}

持久化 Store

配合 Tauri Store 插件实现设置持久化：

// src/store/settings.ts
import { create } from 'zustand'
import { Store } from '@tauri-apps/plugin-store'

interface SettingsState {
  language: string
  autoUpdate: boolean
  setLanguage: (lang: string) => void
  setAutoUpdate: (enabled: boolean) => void
  loadSettings: () => Promise<void>
}

export const useSettingsStore = create<SettingsState>((set) => ({
  language: 'zh-CN',
  autoUpdate: true,

  setLanguage: async (lang) => {
    const store = await Store.load('settings.json')
    await store.set('language', lang)
    await store.save()
    set({ language: lang })
  },

  setAutoUpdate: async (enabled) => {
    const store = await Store.load('settings.json')
    await store.set('autoUpdate', enabled)
    await store.save()
    set({ autoUpdate: enabled })
  },

  loadSettings: async () => {
    const store = await Store.load('settings.json')
    const language = await store.get<string>('language')
    const autoUpdate = await store.get<boolean>('autoUpdate')
    set({
      language: language ?? 'zh-CN',
      autoUpdate: autoUpdate ?? true,
    })
  },
}))

统一导出

// src/store/index.ts
export { useAppStore } from './app'
export { useSettingsStore } from './settings'

最佳实践

• 选择性订阅：使用选择器 (s) => s.field 避免不必要的重渲染
• 按模块分文件：每个 Store 一个文件，通过 index.ts 统一导出
• 异步操作：Store 中可以直接写 async 函数