Creating a Store

A store in the Tauri Store plugin is a persistent, file‑backed key‑value container. It survives application restarts, can be accessed from both the webview (JavaScript/TypeScript) and Rust, and keeps data on disk in a simple JSON format. This page covers what store files are, how to create and load them, and the options for saving data.

Prerequisites

Before you create a store, the Store plugin must be installed and its permissions enabled in your Tauri capabilities file. If you haven’t added the plugin yet, follow the Store Plugin introduction or run the appropriate command in your project root:

npm run tauri add store
# or: pnpm tauri add store / yarn run tauri add store

Then make sure your capabilities configuration includes the required permission. Open src-tauri/capabilities/default.json and add "store:default" to the permissions array. Plugin permissions explains how those identifiers are scoped to windows.

{
  "permissions": [
    "core:default",
    "store:default"
  ]
}

If you have already gone through the plugin installation guide, confirm that tauri-plugin-store is registered in your src-tauri/src/lib.rs. A typical setup looks like this:

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    tauri::Builder::default()
        .plugin(tauri_plugin_store::Builder::default().build())
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

Store Files

Every store is backed by a single file on disk. You choose the file name when you create the store — for example, "settings.json" or "user_prefs.dat". The file is stored inside the application’s data directory (the app_data_dir), which Tauri resolves per platform:

• Windows: C:\Users\<username>\AppData\Roaming\<bundle_identifier>
• macOS: ~/Library/Application Support/<bundle_identifier>
• Linux: ~/.local/share/<bundle_identifier>

The file format is JSON, so you can inspect or even hand‑edit it outside the app if needed. The plugin will create the file the first time data is saved — there is no manual file‑creation step.

Because the path is relative to the app data directory, you never need to worry about absolute paths or file system permissions. A store named "profile.json" will always live at the same predictable location for that application instance.

Loading Stores

There are two patterns for creating and loading a store instance in your frontend code: immediate loading with Store.load(), and deferred loading with LazyStore. Which one you choose depends on whether you need the data right away or are willing to pay the disk I/O cost later.

import { Store } from '@tauri-apps/plugin-store';
async function loadStore() {
  // Loads (or creates) the store file 'config.json'
  const store = await Store.load('config.json', {
    autoSave: false,
  });
  // store is ready — you can call get/set now
  return store;
}

Accessing an Already‑Loaded Store from Rust

The store created in JavaScript can be accessed by Rust code that uses the same file path. The same resource‑table entry is shared, meaning any modification from either side is immediately visible to the other. On the Rust side you would use:

let store = app.store("config.json")?;
store.set("some-key", json!({"value": 5}));

This is particularly useful when you need to read or write persistent configuration from a Tauri command without re‑implementing the file handling.

Saving Stores

Stores give you fine‑grained control over when data is written to disk. Understanding the save lifecycle prevents data loss and avoids unnecessary disk I/O.

Manual Save

Call store.save() whenever you want to flush the in‑memory state to disk. This is the safest approach for critical data where you need to know exactly when persistence happens.

await store.set('preferences', { theme: 'dark' });
// Explicitly persist the change now
await store.save();

Auto‑Save

If you pass a number to the autoSave option during creation, the store will automatically write all changes to disk after a debounce delay. The number is the delay in milliseconds; if you omit it, the default is 100 ms.

const store = await Store.load('data.json', { autoSave: 300 });
await store.set('lastOpened', Date.now());
// 300 ms after the last set, the store saves automatically

Graceful Exit Save

Even with autoSave: false, the plugin attempts to persist all open stores when the application closes gracefully (for example, when the user quits normally). If the process crashes or is killed, unsaved changes are lost — just like any in‑memory data. Use explicit save() calls for mission‑critical data, and treat the graceful‑exit save as a safety net, not your primary persistence strategy.

A Complete React Example

Let’s tie all of this together with a small React component that creates a store, writes a value, reads it back, and provides a button to manually save. This example assumes you have a Tauri + Vite + React project set up and the Store plugin installed as shown earlier.

import { useState, useEffect } from 'react';
import { Store } from '@tauri-apps/plugin-store';
function App() {
  const [store, setStore] = useState<Store | null>(null);
  const [message, setMessage] = useState('');
  useEffect(() => {
    const init = async () => {
      // Load (or create) the store with auto‑save disabled
      const s = await Store.load('messages.json', { autoSave: false });
      setStore(s);
      // Retrieve a previously saved message, if any
      const saved = await s.get<string>('greeting');
      if (saved) {
        setMessage(saved);
      }
    };
    init();
  }, []);
  const handleSave = async () => {
    if (!store) return;
    await store.set('greeting', message);
    // Manually persist to disk
    await store.save();
    alert('Saved!');
  };
  return (
    <div>
      <h1>Store Example</h1>
      <input
        type="text"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
      />
      <button onClick={handleSave}>Save</button>
      <p>Message will be restored on next launch.</p>
    </div>
  );
}
export default App;

The component loads the store inside useEffect and reads any previously stored greeting. When the user clicks Save, the current input value is written and then explicitly persisted. On the next app launch, the saved greeting appears automatically.

Summary

The Store plugin turns a simple JSON file into a cross‑platform persistent key‑value store. By choosing between immediate loading (Store.load()) and deferred loading (LazyStore), you balance startup speed against instant data availability. Saving can be automatic, manual, or a mix of both — pick the approach that matches your data’s importance.