Skip to content

ZhangWei-KUMO/vue_ipc

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vue_ipc

A IPC Render Plugin for vue + electron, you can simply communicate with electron main process, just like ajax。

Install

npm run install vue_ipc
# or
yarn add vue_ipc

Usage

Firstly, import your Vue project:

// main.js 
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import VueIPC from 'vue_ipc';

+ Vue.use(VueIPC);

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

You can use $ipcRenderer object to send and listen message:

export default {
  name: "Home",
  data() {
    return {
      loading: false,
      error: null
    };
  },
  created() {
  // send message to main process
+  this.$ipcRenderer.send("GET", "/video/list?type=history");
   // listen response message from main process 
+ this.$ipcRenderer.once("SERVER_NORMAL_MSG", data => {
        this.videos = data.video;
      });
  }
};

The edit Electron main.js/background.js,like this:

import { ipcMain } from 'electron';
import axios from 'axios';

const API_ADDRESS = "https:www.xxx.com/api";

  ipcMain.on("CLIENT_NORMAL_MSG", async (event, arg) => {
    let remote_url = `${API_ADDRESS}${arg.url}`;
    try {
      let res = await axios.get(remote_url);
      if (res.status === 200) {
        event.reply("SERVER_NORMAL_MSG", res.data)
      }
    } catch (e) {
      event.reply(SERVER_NORMAL_MSG, {
        success: false,
        error: `server error code: ${e.status} msg: ${e.message}`
      })
    }
  })

Methods

Method type Description
send func Send message to electron main process from render process, accept method,URL,body three arguments
once func listen message from electron main process to render process, accept a signal argument and a callback function

Send Function Arguments

Name type Description
method String Normal HTTP Request methods
URL String api url
body Object This is an optional argument,if you use GET method,you can ignore it

About

A IPC Render Plugin for vue + electron

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published