Persist App State to Disk in Tauri 2 | Store Plugin Tutorial

Make your Tauri 2 app remember things across restarts. tauri-plugin-store gives you a tiny key-value store that writes JSON to the OS app data directory — no schema, no migrations, no boilerplate. Set a value, restart the app, the value is still there. Source code: https://github.com/GoCelesteAI/tauri_persisto We build Persisto, a minimal counter that survives every relaunch: increment, decrement, reset — quit the app, reopen it, the count is exactly where you left it. The whole thing is one App.tsx, one Rust plugin registration, one capability entry. What You'll Learn: - tauri-plugin-store — install on both the Rust side (Cargo) and the JS side (pnpm) and register the plugin in lib.rs. - load("counter.json", { autoSave: true }) — opens (or creates) the store file at the platform-correct path. autoSave writes through on every change so you don't have to call save() manually. - store.set(key, value) and typed store.get — typed key-value reads and writes. Values are JSON, so any serializable type works. - The platform store path — macOS Application Support, Linux ~/.local/share, Windows %APPDATA% — each scoped to your bundle identifier. Tauri resolves it from the identifier in tauri.conf.json. - Capability gating — store:default is the permission your capabilities/default.json needs. Without it, the JS load() call errors at runtime. - The load-then-render pattern — call load() once in useEffect, seed React state from store.get, and write back on every change. Pattern works for any "remember the last X" requirement. Timestamps: 0:00 - The proof: increment, quit, relaunch, still there 0:25 - Capability config — store:default 0:50 - Register tauri-plugin-store in lib.rs 1:20 - App.tsx — load the store, read on mount, write on change 3:30 - Run it — the counter that survives restarts 4:15 - End screen Key Takeaways: 1. tauri-plugin-store is the right default for app state. For settings, preferences, last-opened-file paths, window geometry, anything that fits in a flat JSON file under a megabyte — use the store plugin. It writes atomically, lives in the OS-standard app data dir, and ships zero schema. Reach for SQLite (the SQL plugin) when you need queries, indexes, or multi-row relationships, not for "remember the user's theme." 2. autoSave: true removes a whole class of bugs. Without autoSave, you must call store.save() after every change — forget once and a write is lost on app quit. With autoSave on, the plugin flushes to disk after every set call. The cost is a few extra fsyncs per second; the benefit is "the store is always durable." Use autoSave unless you're writing in a tight loop. 3. Always seed React state from the store, not from a default. The shape is: useEffect → load() → get() → setState. If you initialize React state to 0 and also render before the store has loaded, you'll flash the default value for a frame and the user sees the counter jump from 0 to the real value. Either show a loading state until the store resolves, or initialize null and short-circuit the render until data arrives. 4. One store file per concern, not one big bag of state. counter.json, settings.json, recent_files.json are easier to reason about than everything.json. The plugin scales fine to many small stores; corruption of one file doesn't poison the others. 5. Capabilities still gate this. store:default is required in capabilities/default.json. If load() throws "permission not granted," that's what's missing. The store plugin has fine-grained permissions too (store:allow-set, store:allow-get, etc.) — use store:default for development and tighten later if your threat model requires it. This channel is run by Claude AI. Tutorials AI-produced; reviewed and published by Codegiz. Source code at codegiz.com. Part of Tauri Patterns for Production — full playlist linked in the description. #Tauri #Tauri2 #Rust #DesktopApp #React #TypeScript #PluginStore #Persistence #ClaudeAI --- Generated by Claude AI · part of the Tauri Patterns for Production series