useIpcRenderer

类别

@Electron

导出体积

492 B

依赖包

@vueuse/electron

上次更改

6 minutes ago

提供带有 Vue 响应式的 ipcRenderer 及其所有 API。 Available in the @vueuse/electron add-on.

使用方法

TypeScript

import { useIpcRenderer } from '@vueuse/electron'
import { computed } from 'vue'

// 如果你不显式提供 ipcRenderer，需要启用 nodeIntegration
// 参见：https://www.electronjs.org/docs/api/webview-tag#nodeintegration
const ipcRenderer = useIpcRenderer()

// 返回的是 Ref 结果
const result = ipcRenderer.invoke<string>('custom-channel', '一些数据')
const msg = computed(() => result.value?.msg)

// 组件卸载时自动移除监听器
ipcRenderer.on('custom-event', (event, ...args) => {
  console.log(args)
})

import { useIpcRenderer } from '@vueuse/electron'
import { computed } from 'vue'
// 如果你不显式提供 ipcRenderer，需要启用 nodeIntegration
// 参见：https://www.electronjs.org/docs/api/webview-tag#nodeintegration
const ipcRenderer = useIpcRenderer()
// 返回的是 Ref 结果
const result = ipcRenderer.invoke('custom-channel', '一些数据')
const msg = computed(() => result.value?.msg)
// 组件卸载时自动移除监听器
ipcRenderer.on('custom-event', (event, ...args) => {
  console.log(args)
})

可用方法

方法	描述
on(channel, listener)	监听 channel。组件卸载时自动移除监听器。
once(channel, listener)	监听 channel 一次
removeListener(channel, listener)	移除特定监听器
removeAllListeners(channel)	移除 channel 的所有监听器
send(channel, ...args)	向主进程发送异步消息
invoke(channel, ...args)	发送消息并以 ShallowRef 获取响应
sendSync(channel, ...args)	发送同步消息并以 ShallowRef 获取响应
postMessage(channel, message, transfer?)	发送带可转移对象的消息
sendTo(webContentsId, channel, ...args)	发送到指定 webContents
sendToHost(channel, ...args)	发送到 webview 主机

使用自定义 IpcRenderer

如果禁用 nodeIntegration，你可以显式传入 ipcRenderer 实例：

import { useIpcRenderer } from '@vueuse/electron'
import { ipcRenderer } from 'electron'

const ipc = useIpcRenderer(ipcRenderer)

类型声明

显示类型声明

/**
 * useIpcRenderer 返回的结果
 *
 * @see https://www.electronjs.org/docs/api/ipc-renderer
 */
export interface UseIpcRendererReturn {
  /**
   * 监听频道，当新消息到达时，调用监听器 listener(event, args...)。
   * 在卸载时自动 [ipcRenderer.removeListener](https://www.electronjs.org/docs/api/ipc-renderer#ipcrendererremovelistenerchannel-listener)。
   *
   * @see https://www.electronjs.org/docs/api/ipc-renderer#ipcrendereronchannel-listener
   */
  on: (channel: string, listener: IpcRendererListener) => IpcRenderer
  /**
   * 添加一次性监听器函数到事件上。当事件被触发时，监听器会被调用一次，然后被移除。
   *
   * @see https://www.electronjs.org/docs/api/ipc-renderer#ipcrendereroncechannel-listener
   */
  once: (
    channel: string,
    listener: (event: IpcRendererEvent, ...args: any[]) => void,
  ) => IpcRenderer
  /**
   * 从监听器数组中移除指定的监听器。
   *
   * @see https://www.electronjs.org/docs/api/ipc-renderer#ipcrendererremovelistenerchannel-listener
   */
  removeListener: (
    channel: string,
    listener: (...args: any[]) => void,
  ) => IpcRenderer
  /**
   * 移除所有监听器，或指定频道的所有监听器。
   *
   * @see https://www.electronjs.org/docs/api/ipc-renderer#ipcrendererremovealllistenerschannel
   */
  removeAllListeners: (channel: string) => IpcRenderer
  /**
   * 通过频道异步发送消息到主进程，附带参数。
   *
   * @see https://www.electronjs.org/docs/api/ipc-renderer#ipcrenderersendchannel-args
   */
  send: (channel: string, ...args: any[]) => void
  /**
   * 返回 Promise<any> - 解析为来自主进程的响应。
   * 通过频道发送消息到主进程，并异步期待结果。
   * 作为组合 API，它使得异步操作看起来像同步的。
   *
   * @see https://www.electronjs.org/docs/api/ipc-renderer#ipcrendererinvokechannel-args
   */
  invoke: <T>(channel: string, ...args: any[]) => ShallowRef<T | null>
  /**
   * 返回 any - 由 ipcMain 处理程序返回的值。
   * 通过频道发送消息到主进程，并同步期待结果。
   *
   * @see https://www.electronjs.org/docs/api/ipc-renderer#ipcrenderersendsyncchannel-args
   */
  sendSync: <T>(channel: string, ...args: any[]) => ShallowRef<T | null>
  /**
   * 发送消息到主进程，可选择传输零个或多个 MessagePort 对象的所有权。
   *
   * @see https://www.electronjs.org/docs/api/ipc-renderer#ipcrendererpostmessagechannel-message-transfer
   */
  postMessage: (channel: string, message: any, transfer?: MessagePort[]) => void
  /**
   * 通过频道将消息发送到具有 webContentsId 的窗口。
   *
   * @see https://www.electronjs.org/docs/api/ipc-renderer#ipcrenderersendtowebcontentsid-channel-args
   */
  sendTo: (webContentsId: number, channel: string, ...args: any[]) => void
  /**
   * 类似 ipcRenderer.send，但事件将被发送到主页中的 <webview> 元素，而不是主进程。
   *
   * @see https://www.electronjs.org/docs/api/ipc-renderer#ipcrenderersendtohostchannel-args
   */
  sendToHost: (channel: string, ...args: any[]) => void
}
/**
 * 获取 `ipcRenderer` 模块及其所有 API。
 *
 * @see https://www.electronjs.org/docs/api/ipc-renderer#ipcrenderersendtohostchannel-args
 * @see https://vueuse.org/useIpcRenderer
 */
export declare function useIpcRenderer(
  ipcRenderer?: IpcRenderer,
): UseIpcRendererReturn

源码

源码 • 文档

贡献者

一纸忘忧

更新日志

没有最近的更新日志