Store Management

Tauri 状态管理

双层状态架构

┌──────────────────────────────────────────┐
│  前端状态 (React)                          │
│  ├── 组件内: useState                      │
│  ├── 全局状态: Zustand (src/store/index.ts)│
│  ├── API 封装: src/lib/api/index.ts        │
│  └── Hooks: src/hooks/useCommand.ts        │
├──────────────────────────────────────────┤
│  IPC 桥接 (invoke / listen)                │
├──────────────────────────────────────────┤
│  后端状态 (Rust - 三层架构)                 │
│  ├── 运行时: tauri::State<AppState>        │
│  │   (定义于 src-tauri/src/state.rs)       │
│  ├── 持久化: tauri-plugin-store            │
│  └── 数据库: rusqlite (SQLite)             │
│      (src-tauri/src/database/)             │
└──────────────────────────────────────────┘

关键文件位置

React 前端状态

方案 1: useState(组件内状态)

function Counter() {
  const [count, setCount] = useState(0);
  return <button => setCount(c => c + 1)}>Count: {count}</button>;
}

方案 2: React Context(跨组件共享)

import { createContext, useContext, useState, ReactNode } from "react";

interface AppContextType {
  theme: "light" | "dark";
  setTheme: (theme: "light" | "dark") => void;
  user: string | null;
  setUser: (user: string | null) => void;
}

const AppContext = createContext<AppContextType | null>(null);

function AppProvider({ children }: { children: ReactNode }) {
  const [theme, setTheme] = useState<"light" | "dark">("light");
  const [user, setUser] = useState<string | null>(null);

  return (
    <AppContext.Provider value={{ theme, setTheme, user, setUser }}>
      {children}
    </AppContext.Provider>
  );
}

function useApp() {
  const ctx = useContext(AppContext);
  if (!ctx) throw new Error("useApp must be used within AppProvider");
  return ctx;
}

方案 3: Zustand(轻量全局状态,推荐)

pnpm add zustand

import { create } from "zustand";

interface AppStore {
  count: number;
  increment: () => void;
  items: Item[];
  setItems: (items: Item[]) => void;
  loadItems: () => Promise<void>;
}

const useAppStore = create<AppStore>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  items: [],
  setItems: (items) => set({ items }),
  loadItems: async () => {
    const items = await invoke<Item[]>("list_items");
    set({ items });
  },
}));

// 使用
function MyComponent() {
  const { items, loadItems } = useAppStore();
  useEffect(() => { loadItems(); }, []);
  return <div>{items.length} items</div>;
}

Rust 后端状态

tauri::State(运行时状态)

use std::sync::Mutex;

struct AppState {
    counter: Mutex<u32>,
    config: Mutex<AppConfig>,
}

impl Default for AppState {
    fn default() -> Self {
        Self {
            counter: Mutex::new(0),
            config: Mutex::new(AppConfig::default()),
        }
    }
}

// 注册
tauri::Builder::default()
    .manage(AppState::default())

// 使用
#[tauri::command]
fn increment(state: tauri::State<'_, AppState>) -> Result<u32, String> {
    let mut counter = state.counter.lock().map_err(|e| e.to_string())?;
    *counter += 1;
    Ok(*counter)
}

tauri-plugin-store(键值持久化)

# Cargo.toml
tauri-plugin-store = "2"
# package.json
pnpm add @tauri-apps/plugin-store

// Rust 注册
tauri::Builder::default()
    .plugin(tauri_plugin_store::Builder::default().build())

// TypeScript 使用
import { Store } from "@tauri-apps/plugin-store";

const store = await Store.load("settings.json");
await store.set("theme", "dark");
const theme = await store.get<string>("theme");
await store.save();  // 持久化到磁盘

选型建议

常见错误