Nuxt3+Tauri中使用tauri-settings无法保存设置到JSON文件

问题描述 #

使用Nuxt3和Tauri开发桌面应用，依赖tauri-settings库将设置保存到settings.json文件时遇到异常：

• 已按库文档实现代码，且在tauri.conf.json中配置了所需文件系统权限
• 调用saveSettingsToDisk时，仅输出前置日志，await settingsManager.syncCache()后的日志无输出，文件也未更新
• 前端控制台无报错信息
• 项目为学习Nuxt3和Rust的爱好项目，此前用过Electron和Python

相关代码片段 #

useSettings.ts（自定义Hook） #

// useSettings.ts
import { ref, watch } from 'vue';
import { SettingsManager } from 'tauri-settings';

interface Settings {
  sourceDirectory: string;
  targetDirectory: string;
  selectedCopyMode: string | null;
  selectedLanguage: string | null;
}

const settingsManager = new SettingsManager('copybot-settings');
const settings = ref<Settings>({
  sourceDirectory: '',
  targetDirectory: '',
  selectedCopyMode: null,
  selectedLanguage: null,
});

const copyModes = ref(['Auto', 'Manual']);
const languages = ref(['English', 'Deutsch', 'Français']);

export const useSettings = () => {
  const loadSettings = async () => {
    try {
      const loadedSettings = await settingsManager.get('settings');
      if (loadedSettings) {
        settings.value = loadedSettings;
      }
    } catch (error) {
      console.error("Failed to load settings:", error);
    }
  };

  const updateSetting = async (key, value) => {
    settingsManager.setCache(key, value);
  };

  const saveSettings = async () => {
    try {
      await settingsManager.set('settings', settings.value);
    } catch (error) {
      console.error("Failed to save settings:", error);
    }
  };

  const saveSettingsToDisk = async () => {
    try {
      console.log("Saving the settings:", settings.value);
      await settingsManager.syncCache();
      console.log("Settings saved.");
    } catch (error) {
      console.error("Failed to save settings on disk:", error);
      if (error instanceof Error) {
        console.error("Error Details:", error.message);
      }
    }
  };

  watch(settings, saveSettings, { deep: true });

  return {
    settings,
    loadSettings,
    saveSettings,
    copyModes,
    languages,
    saveSettingsToDisk,
    updateSetting  
  };
};

settings.vue #

<template>
  <v-container>
    <!-- Kopfzeile -->
    <v-row>
      <v-col cols="12">
        <h1>Settings</h1>
      </v-col>
    </v-row>

    <!-- Source Directory -->
    <v-row align="center">
      <v-col cols="10">
        <v-text-field
          label="Source Directory"
          v-model="settings.sourceDirectory"
          readonly
        ></v-text-field>
      </v-col>
      <v-col cols="2">
        <v-btn @click="browseDirectory">Browse</v-btn>
      </v-col>
    </v-row>

    <!-- Copy Mode -->
    <v-row>
      <v-col cols="12">
        <v-select
          label="Copy Mode"
          :items="copyModes"
          :value="settings.selectedCopyMode"
          @input="(value) => updateSetting('selectedCopyMode', value)"
        ></v-select>
      </v-col>
    </v-row>

    <!-- Language Selection -->
    <v-row>
      <v-col cols="12">
        <v-select
          label="Language"
          :items="languages"
          v-model="settings.selectedLanguage"
        ></v-select>
      </v-col>
    </v-row>

    <!-- Target Directory -->
    <v-row align="center">
      <v-col cols="10">
        <v-text-field
          label="Target Directory"
          v-model="settings.targetDirectory"
          readonly
        ></v-text-field>
      </v-col>
      <v-col cols="2">
        <v-btn @click="setTargetDirectory">Set Target</v-btn>
      </v-col>
    </v-row>
  </v-container>

  <v-row>
    <v-col>
      <v-btn @click="saveSettingsToDisk">Einstellungen speichern</v-btn>
    </v-col>
  </v-row>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import { useSettings } from "../hooks/useSettings";

const {
  settings,
  loadSettings,
  copyModes,
  languages,
  saveSettingsToDisk,
  updateSetting
} = useSettings();

const browseDirectory = () => {
  /* ... */
};
const setTargetDirectory = () => {
  /* ... */
};

onMounted(loadSettings);
</script>

tauri.conf.json（片段） #

"tauri": {
  "allowlist": {
    "all": false,
    "fs": {
      "createDir": true,
      "removeDir": true,
      "readDir": true,
      "copyFile": true,
      "readFile": true,
      "writeFile": true,
      "removeFile": true,
      "renameFile": true,
      "exists": true,
      "scope": ["$APPCONFIG", "$APPCONFIG/*"]
    },
    "path": {
      "all": true
    }
  }
}

问题排查与修复方案 #

1. 缓存与同步逻辑不匹配 #

你的代码同时维护了两种更新路径：

• updateSetting往cache中写入单个字段
• watch监听settings对象变化，调用saveSettings写入整个对象
  而saveSettingsToDisk调用的syncCache是同步cache中的内容到磁盘，这导致缓存与实际要存储的对象结构不一致，无法正确写入。

修复方案：统一使用settingsManager.set直接写入整个对象（该方法本身会自动同步到磁盘），移除不必要的cache操作：

// 移除updateSetting方法
// 修改saveSettingsToDisk逻辑
const saveSettingsToDisk = async () => {
  try {
    console.log("Saving the settings:", settings.value);
    await saveSettings(); // 直接调用已有的saveSettings方法
    console.log("Settings saved.");
  } catch (error) {
    console.error("Failed to save settings on disk:", error);
    if (error instanceof Error) {
      console.error("Error Details:", error.message);
    }
  }
};

2. 组件中输入绑定冲突 #

在Copy Mode的v-select组件中，使用:value+@input调用updateSetting，仅更新了cache但未同步到响应式的settings对象，导致watch未触发自动保存。

修复方案：统一使用v-model绑定settings.selectedCopyMode，保持数据一致性：

<v-select
  label="Copy Mode"
  :items="copyModes"
  v-model="settings.selectedCopyMode"
></v-select>

3. 验证设置文件路径 #

添加日志确认tauri-settings实际使用的文件路径是否在权限范围内：

// 在loadSettings中添加路径打印
const loadSettings = async () => {
  try {
    console.log('Settings file path:', await settingsManager.path());
    const loadedSettings = await settingsManager.get('settings');
    if (loadedSettings) {
      settings.value = loadedSettings;
    }
  } catch (error) {
    console.error("Failed to load settings:", error);
  }
};

若路径不在$APPCONFIG下，需调整tauri.conf.json的fs.scope配置。

4. 检查Tauri后端日志 #

前端控制台可能无法捕获Tauri后端的错误，启动项目时查看tauri dev的终端输出，确认是否有文件系统权限或IO错误。

内容的提问来源于stack exchange，提问作者Laexxi