将 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

我建议您使用 electron 的 contextBridge 将某些方法 (send/receive) 暴露给渲染器进程。

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

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

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

有了这个，您的路径将作为 window.electronApi.pathtf

暴露给您的渲染器进程

以下两个资源可能对您有所帮助：

https://medium.com/swlh/how-to-safely-set-up-an-electron-app-with-vue-and-webpack-556fb491b83（这个可能不是您要找的，但它有一个很好的解释/示例，说明如何将 ipc 与 view 和 electron 一起使用）

将 ipcRenderer 变量发送到 vue3 页面

Send ipcRenderer variable to vue3 page

javascript

ipc

electron

ipcrenderer

vuejs3