来自 Vue.js 单文件组件的电子 ipcRenderer

Question

我正在尝试在我的 Vue 单一文件组件中使用 Electron 的 ipcRenderer 来填充一些数据。用ipcRenderer.send(...) 调用很容易，但在回复中我想用响应消息更新我的组件的每个实例。我认为ipcRenderer.on(...) 中的评论最能解释我的问题。有没有好的方法来做到这一点。我对 JS 完全陌生。

<template>
  <v-container fluid>
    <v-btn @click="do_action()">{{title}}</v-btn>
    <v-textarea v-model="response_message">
    </v-textarea>
  </v-container>
</template>

<script>
  const { ipcRenderer } = require('electron')

  export default {
    props: ['title'],
    data: function(){
      return {
        response_message: "Original Message"
      }
    },
    methods: {
      do_action: function() {
        ipcRenderer.send('cmnd_foo')
      }
    },
  }

  ipcRenderer.on('cmnd_foo-reply', (event, a_new_message) => {
    // obviously this.response_message isn't in scope...
    // how can I get this intent to work
    this.response_message = a_new_message
  })
</script>

Answer 1

-- 更新--

使用 vuex 商店或类似的东西。

-- 原创--

我似乎找到了一种方法。也许还有更好的方法？

<template>
  <v-container fluid>
    <v-btn @click="do_action()">{{title}}</v-btn>
    <v-textarea v-model="response_message">
    </v-textarea>
  </v-container>
</template>

<script>
  const { ipcRenderer } = require('electron')

  var catcher = 0;
  function setMessage(msg) {
    this.response_message = msg
  }

  export default {
    props: ['title'],
    data: function(){
      return {
        response_message: "Original Message"
      }
    },
    methods: {
      do_action: function() {
        catcher = setMessage.bind(this)
        ipcRenderer.send('cmnd_foo')
      }
    },
  }

  ipcRenderer.on('cmnd_foo-reply', (event, a_new_message) => {
    catcher(a_new_message);
  })
</script>

Answer 2

您可以应用这篇文章中描述的解决方案 How to import ipcRenderer in vue.js ? __dirname is not defined

只要确保你在 vue.config.js 上配置了 preload.js：

// vue.config.js - project root
module.exports = {
  pluginOptions: {
    electronBuilder: {
       preload: 'src/preload.js'  //make sure you have this line added
    }
  }
}

另一个解决方案可以在这里找到https://medium.com/swlh/how-to-safely-set-up-an-electron-app-with-vue-and-webpack-556fb491b83，它使用 __static 来引用预加载文件，而不是在 vue.config.js 上配置它。要使其正常工作，您可以在 BrowserWindow 构造函数中禁用预加载 es-lint 警告：

// eslint-disable-next-line no-undef
preload: path.resolve(__static, 'preload.js')

并确保您在 /public 文件夹中添加了 preload.js 文件

Answer 3

只需在末尾添加remote：

const { ipcRenderer } = require('electron').remote