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

Question

I'm trying to use Electron's ipcRenderer inside my Vue sigle file component to populate some data. It easy enough to call out with a ipcRenderer.send(...) but on the reply I want to update each instance of my component with the response message. I think the comment in ipcRenderer.on(...) explains my issue the best. Is there a good way to do this. I'm completely new to 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

-- Update --

Use a vuex store or something like.

-- Original --

I seem to have found a way to do it. Maybe there is still a better way?

 <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

You can apply the solution described on this post How to import ipcRenderer in vue.js ? __dirname is not defined

Just make sure you configure preload.js on vue.config.js:

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

Another solution can be found here https://medium.com/swlh/how-to-safely-set-up-an-electron-app-with-vue-and-webpack-556fb491b83 and it use __static to refer to preload file instead of configure it on vue.config.js. To make it work you can disable preload es-lint warning inside of BrowserWindow constructor:

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

And make sure you added preload.js file on /public folder

Answer 3

只需在最后添加remote ：

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