将 ipcRenderer 变量发送到 vue3 页面

Question

我有一个带有电子的 vue3 应用程序，需要将一个变量从 ipcRenderer 发送到我的 Vue3 页面。我不知道该怎么做，尤其是考虑到 vue 剥离了很多 js。我想要做的是保存一个到目前为止工作正常的文件夹的路径，然后在 vue3 应用程序中显示它，无论是跨度还是其他。我成功获得了需要显示给 ipcRenderer 的值，但无法使用我的 vue 应用程序访问它。

Vue3 页面

          <q-btn
            id="showpath"
            dark
            flat
            size="xl"
            label="show Path"
            type="submit"
            @click="showpath"
          />
        </div>

export default {
  name: "Settings",
  props: {},
  methods: {
    loader() {
      window.postMessage({
        type: "select-dirs",
      });
    },
    showpath() {
      const testa = window.postMessage({ type: "pathtf"})
      console.log("Vue page says :"+ testa)
    },
  },
};
</script>

我在这里得到的只是“未定义”

预加载器脚本

const { ipcRenderer } = require('electron');
const settings = require('./settings');

process.once('loaded', () => {
    window.addEventListener('message', evt => {
            if (evt.data.type === 'select-dirs') {
                ipcRenderer.send('select-dirs')

            }

        }),
        window.addEventListener('message', evt => {
            if (evt.data.type === 'pathtf') {
                const pathtf = settings.gettfpath("pathtf")
                console.log(pathtf)
            }

        })
})

预加载文件中的 console.log 工作并显示该值，但我无法将该值获取到我的 vue3 页面。

任何提示？谢谢

Answer 1

我建议您使用电子的 contextBridge 将某些方法（发送/接收）暴露给渲染器进程。

我不知道你的 gettfPath 方法是做什么的，但如果你可以在 preloadjs 文件中使用该变量，你应该能够像这样将它公开为一个变量：

const {contextBridge} = require("electron");

contextBridge.exposeInMainWorld("electronApi", {
  pathtf: settings.gettfPath()
});

这样，您的路径将作为 window.electronApi.pathtf

暴露给您的渲染器进程

这里有两个资源可能对您有帮助：

1. How to use preload.js properly in Electron
2. https://medium.com/swlh/how-to-safely-set-up-an-electron-app-with-vue-and-webpack-556fb491b83（这可能不是您正在寻找的，但它有一个很好的解释/示例，说明如何使用带有视图和电子的 ipc）