> cargo install create-tauri-app --locked> cargo create-tauri-app✔ Project name · draganddrop✔ Choose which language to use for your frontend · TypeScript / JavaScript -(pnpm, yarn, npm, bun)✔ Choose your package manager · npm✔ Choose your UI template · React -(https://react.dev/)✔ Choose your UI flavor · TypeScriptTemplate created! To get started run:cd draganddropnpm installnpm run tauri dev
src-tauri/src/main.rs の
tauri::Builder::default() に、 Store
プラグインを登録する定義を追加。
fn main() {tauri::Builder::default().plugin(tauri_plugin_store::Builder::default().build()) # この行を追加.run(tauri::generate_context!()).expect("error while running tauri application");}
Store を使うための事前準備はこれだけ。
後は、使うための実装をしていく。
Store を使って永続化
テキストフィールドの値をストアに保存し、次回起動時に復元するようにしてみる。
また、バックエンドは前回起動日時をストアに記録し、起動時に標準出力へ表示する。
フロントエンド
import { useEffect, useState } from "react";
import reactLogo from "./assets/react.svg";
import "./App.css";
import { Store } from "tauri-plugin-store-api";
function App() {
const [greetMsg, setGreetMsg] = useState("");
const [name, setName] = useState("");
useEffect(() => {
(async () => {
// ストアから情報を抽出して存在するなら表示
const store = new Store("greet.json");
const name = await store.get("name");
setName(name?.value);
})();
}, []);
return (
<div className="container">
<h1>Welcome to Tauri!</h1>
<div className="row">
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" className="logo vite" alt="Vite logo" />
</a>
<a href="https://tauri.app" target="_blank">
<img src="/tauri.svg" className="logo tauri" alt="Tauri logo" />
</a>
<a href="https://reactjs.org" target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>
<p>Click on the Tauri, Vite, and React logos to learn more.</p>
<form
className="row"
onSubmit={(e) => {
e.preventDefault();
setGreetMsg(`Hello, ${name}! You've been greeted from Rust!`);
}}
>
<input
id="greet-input"
onChange={ async (e) => {
setName(e.currentTarget.value)
// ストアに保存
const store = new Store("greet.json");
await store.set("name", { value: e.currentTarget.value });
}}
placeholder="Enter a name..."
value={name}
/>
<button type="submit">Greet</button>
</form>
<p>{greetMsg}</p>
</div>
);
}
export default App;
new Store("greet.json")
で、アプリローカルディレクトリ(~/.local/share/<アプリのidentify>) に
greet.json という名前のストアを作成
store.set(<キー>, <バリュー>)
で、キーに対してバリューを保存
store.save() でファイルへ書き出し
store.get(<キー>) で保存したバリューを取得
バックエンド
// Prevents additional console window on Windows in release, DO NOT REMOVE!!#![cfg_attr(not(debug_assertions), windows_subsystem ="windows")]usestd::time::SystemTime;useserde_json::json;usetauri_plugin_store::StoreBuilder;fn main() {tauri::Builder::default().plugin(tauri_plugin_store::Builder::default().build()).setup(|app|{// ストア情報をロードletmut store =StoreBuilder::new(app.handle(),"greet_backend.json".parse()?).build();let _ = store.load();// store のキー `launch` から前回起動時刻を取得し、表示let launch = store.get("launch");println!("previous launch: {:?}", launch);// 現在時刻をストアに保存let now =SystemTime::now();let _ = store.insert("launch".to_string(),json!(now));let _ = store.save();Ok(())}).run(tauri::generate_context!()).expect("error while running tauri application");}
