7.1 官方插件矩阵：fs、dialog、http、store

进仓库先认货。本节过最常用的四个官方插件——fs、dialog、http、store：每个插件讲清"解决什么、怎么接、权限怎么给、坑在哪"，最后给一张"官方件还是自写命令"的选用判据表。读完本节，多数系统能力需求你都能在十分钟内接上线。

接线四动作：所有插件的通用剧目

每个官方插件的接入都是同一套动作，先把它背下来，后面四件货只讲差异：

# 动作一：装 Rust 侧（src-tauri 目录下执行）
cargo add tauri-plugin-dialog
# 动作二：装前端侧（项目根目录执行）
npm install @tauri-apps/plugin-dialog
​

// 动作三：Builder 登记插件
tauri::Builder::default()
    .plugin(tauri_plugin_dialog::init())
    .run(tauri::generate_context!())
    .unwrap();
​

// 动作四：Capabilities 发卡（6.2 的清单里加一行）
{ "permissions": ["dialog:allow-save", "dialog:allow-open"] }
​

四动作的顺序有讲究：先发卡再测试——忘发卡的报错（权限拒绝）与命令名拼错的报错容易混淆，按固定顺序走能省掉这类纠结。

fs：文件读写

前端直接读写文件的主力件。第 5 章说过分工——业务封装自写命令，通用访问用 fs。前端 API 与作用域联动：

import { readTextFile, writeTextFile, mkdir, exists, BaseDirectory } from '@tauri-apps/plugin-fs';

export async function saveDraft(name: string, content: string) {
  const dir = 'notes';
  if (!(await exists(dir, { baseDir: BaseDirectory.AppData }))) {
    await mkdir(dir, { baseDir: BaseDirectory.AppData, recursive: true });
  }
  await writeTextFile(`${dir}/${name}`, content, { baseDir: BaseDirectory.AppData });
}
​

坑在作用域：API 调用会同时过两道检查——权限有没有、路径在不在 6.2 配的作用域里。baseDir 指定锚点目录，作用域写 $APPDATA/** 或精确子目录，两者对不齐就是"明明授了权还报错"的头号原因。坑在二进制：readTextFile 只管文本，图片等二进制用 readFile 拿字节数组，大文件仍建议走芯侧命令加资源协议（2.1 的序列化边界）。

dialog：系统对话框

文件选择、保存路径、消息确认三类原生对话框。体积最小、最容易接的一件：

import { open, save, confirm } from '@tauri-apps/plugin-dialog';

// 选文件：过滤 markdown
const file = await open({
  multiple: false,
  filters: [{ name: 'Markdown', extensions: ['md'] }],
});
if (typeof file === 'string') {
  const text = await readTextFile(file); // 配合 fs 读内容
}

// 另存为：拿目标路径
const target = await save({ defaultPath: '未命名.md' });

// 确认框：返回布尔
const ok = await confirm('删除这条笔记？', { title: '随身笔记', kind: 'warning' });
​

权限按需给：只做另存为就只授 dialog:allow-save。坑在取消语义：用户点取消返回 null 而不是抛错——所有调用点都要判空，漏判是 dialog 最常见的小事故。

http：走芯的网络请求

前端 fetch 走浏览器栈，受 CORS 约束；http 插件的 fetch 走芯侧 reqwest，无 CORS 之困且权限可管：

import { fetch } from '@tauri-apps/plugin-http';

const API_BASE = 'https://api.example.com'; // 示意常量，实际取自你的配置

const resp = await fetch(`${API_BASE}/notes`, {
  method: 'POST',
  headers: { 'content-type': 'application/json' },
  body: JSON.stringify({ title: '新笔记' }),
});
const data = await resp.json();
​

权限必须配作用域——允许请求哪些地址是 http 插件的核心安全面：

{ "identifier": "http:default", "allow": [{ "url": "https://api.example.com/*" }] }
​

只授自家 API 域名，别图省事放通配全站——6.1 判据三在 http 上的直接应用。选型提示：简单场景直接用 5.3 的芯侧封装更可控；http 插件的价值在前端要灵活发请求、又不想每个端点都写命令的中等复杂度应用。

图 7-1：官方插件矩阵与选件指引

store：键值持久化

设置项、界面偏好的轻量落盘（窗口几何记忆优先用 7.3 提到的 window-state）：

import { load } from '@tauri-apps/plugin-store';

const store = await load('settings.json', { autoSave: false });
await store.set('theme', 'dark');
await store.set('recentPaths', ['/notes/2026']);
await store.save(); // autoSave 关闭时手动落盘
const theme = await store.get<string>('theme');
​

适用边界：键值小数据。结构化业务数据（笔记本体）仍走芯与正规存储——store 的定位是"配置"，不是"数据库"。

官方件还是自写命令：选用判据

判据一句话：通用能力找官方件，业务语义进命令。官方件解决"前端要摸到系统"，命令解决"应用要完成业务"——把业务逻辑塞进前端直调插件的组合里，6.1 说的"业务校验在芯"就落空了。

本节要点回顾

• 接线四动作：Rust 侧装、前端侧装、Builder 登记、Capabilities 发卡，两侧包版本同批升级；
• fs 两坑：baseDir 与作用域对齐、文本二进制 API 分清；
• dialog 取消返回 null：调用点必判空；
• http 作用域授域名：芯侧网络无 CORS，权限按 URL 收口；
• store 管配置不管数据：业务数据走芯与正规存储。

官方件领完。下一节自造标准件：当通用逻辑想跨项目复用，怎么把它做成一个真正的插件。