使用 VueJS 和 Electron 保存文件

Question

I want to save and load JSON from a file which is allocated to my local storage.

Its my first project using Electron.

This is my current code and I get this error. fs.readFileSync is not a function

<script>
import timer from "./components/Timer"
import fs from "fs"

export default {
  name: 'App',
  components: {
    timer
  },
  data() {
    console.log(fs.readFileSync("timer.json"))
    return {
      timerOptions: null
    }
  },
  created() {
    this.timerOptions = fs.readFileSync("./timer.json") // Here I want to load Data, but get the Error
    console.log(this.timerOptions)
  }
}
</script>

Answer 1

In the main process write your save to file function as:

import { ipcMain } from 'electron';
import fs from 'fs';

ipcMain.handle('export-file', async (event, {data}) => {
  return new Promise((resolve, reject) => {
    const stream = fs.createWriteStream(filePath, {
      encoding: 'utf-8',
    });
  ... save the data here
})

Then call it from your Vue component as:

<script>
import { ipcRenderer } from 'electron';

export default {
  name: 'SaveFileComponent',

  methods: {
    async save() {
      const data = {}; // load it from your source            
      await ipcRenderer.invoke('export-file', {data});
    }
 }
}
</script>