Question

我正在尝试在Vue sigle文件组件中使用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

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

<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

只需在末尾添加remote：

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

Vue.js单文件组件中的电子ipcRenderer

2 个答案: