0

我有一个带有电子的 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 页面。

任何提示？谢谢

4

1 回答 1

0

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

我不知道您的 gettfPath 方法是做什么的，但是如果您可以在 preloadjs 文件中使用该变量，您应该能够将其作为变量公开，如下所示：

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

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

有了这个，您的路径将作为window.electronApi.pathtf暴露给您的渲染器进程

以下是您可能会发现有用的两个资源：

  1. 如何在 Electron 中正确使用 preload.js
  2. https://medium.com/swlh/how-to-safely-set-up-an-electron-app-with-vue-and-webpack-556fb491b83（这可能不是您正在寻找的，但它有关于如何使用带有视图和电子的 IPC 的一个很好的解释/示例）
于 2022-01-10T15:07:16.920 回答