Electron?store及shareObject進(jìn)程間數(shù)據(jù)交互存儲(chǔ)功能封裝

更新時(shí)間：2022年09月15日 09:08:30 作者：做什么夢(mèng)呢

這篇文章主要為大家介紹了Electron?store及shareObject進(jìn)程間數(shù)據(jù)交互存儲(chǔ)功能封裝示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

一、前言

本篇主要介紹electron應(yīng)用存儲(chǔ)功能的封裝，以及electron-store與shareObject的不同使用場(chǎng)景，并包含其原理介紹。

二、存儲(chǔ)方案

1.shareObject

這里先給大家介紹shareObject，這里所說(shuō)的shareObject實(shí)際上是global.shareObject，它可以用于主進(jìn)程和渲染進(jìn)程通信，同時(shí)也可以用于渲染進(jìn)程之間相互傳遞數(shù)據(jù)。

這里還要給大家說(shuō)明一下，實(shí)現(xiàn)進(jìn)程間的數(shù)據(jù)相互傳遞的，主要是通過(guò)global這一個(gè)全局變量來(lái)做成的，shareObject只是一個(gè)名詞，用來(lái)承載進(jìn)程間的交互所有變量存儲(chǔ)地址。在你定義的時(shí)候也可以不叫shareObject，取任意名字都是可以的，只不過(guò)shareObject是大家都比較認(rèn)同的一個(gè)名字。

這里我們需要再主進(jìn)程先定義好global.shareObject，具體代碼如下

// background.js
app.on('ready', async () => {
  // 多窗口數(shù)據(jù)存儲(chǔ)
  global.sharedObject = {
    windowsIdList: []
  }
})

在渲染進(jìn)程中使用如下

//main.js
// 將sharedObject定義到全局變量window.$_SO中
window.$remote = window.require('electron').remote
window.$_SO = window.$remote.getGlobal('sharedObject')
console.log('sharedObject', window.$_SO)

之后就是在頁(yè)面中存取

// App.vue
// 取值
console.log(window.$_SO.windowsIdList)
// 賦值
window.$_SO.windowsIdList = [1, 2, 3]
console.log(window.$_SO.windowsIdList) // [1, 2, 3]

這里需要注意的點(diǎn)就是在渲染進(jìn)程中用到的key都要先在主進(jìn)程中定義好。否則，在渲染進(jìn)程中直接使用的話，就會(huì)看到undefined之類的字樣

當(dāng)我們的業(yè)務(wù)變得越來(lái)越復(fù)雜，窗口越來(lái)越多的時(shí)候，我們存儲(chǔ)的字段的會(huì)變得越來(lái)越多，若都直接放到一起聲明，會(huì)變得很復(fù)雜，顯得不夠精簡(jiǎn)，因此這里我借鑒了store的modules模塊，將不同類型的存儲(chǔ)變量放到不同文件再進(jìn)行集成，統(tǒng)一注冊(cè)變量。組成如下圖所示的文件目錄

我們?cè)诟夸浵聞?chuàng)建一個(gè)electron-config文件夾，用于存放electron相關(guān)的文件。之后在下面創(chuàng)建一個(gè)文件夾ShareMoudles，文件夾內(nèi)專門存檔不同類別的存儲(chǔ)變量，如圖所示

最終在ElectronSharedObject.js文件中，將所有ShareMoudles文件夾下變量統(tǒng)籌到一起，代碼如下

// 獲取./ShareMoudles文件夾下所有js文件（不需要再用import引入了）
const modulesFiles = require.context('./ShareMoudles', true, /\.js$/)
// 構(gòu)建 modules，直接使用
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/g, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})
export const sharedObject = {
  ...modules
}

之后我們?cè)赽ackground.js中將這些變量初始化到shareObject中，如下圖所示

// background.js
import { sharedObject } from './electron-config/ElectronSharedObject'
app.on('ready', async () => {
  // 多窗口數(shù)據(jù)存儲(chǔ)
  global.sharedObject = {
    ...sharedObject
  }
})

我們?cè)阡秩具M(jìn)程就可以在控制臺(tái)打印后看到我們初始化的變量，如下圖

2.electron-store

electron-store是以文件形式緩存數(shù)據(jù)，保存應(yīng)用程序或模塊的簡(jiǎn)單數(shù)據(jù)持久性-保存和加載用戶首選項(xiàng)、應(yīng)用程序狀態(tài)、緩存等。利用它我們可以實(shí)現(xiàn)一些類似7天內(nèi)自動(dòng)登錄這樣的功能。

安裝依賴

npm install electron-store
//or
yarn add electron-store

創(chuàng)建實(shí)例文件

// ElectronStore.js
import Store from 'electron-store'
const electronStore = new Store()
// console.log('size', electronStore.size) // 獲取項(xiàng)目總個(gè)數(shù)
// console.log('path', electronStore.path) // 獲取存儲(chǔ)文件的路徑
// console.log('store', electronStore.store) // 獲取所有數(shù)據(jù)作為對(duì)象或?qū)?dāng)前數(shù)據(jù)替換為對(duì)象
// console.log('set', electronStore.set()) // 存儲(chǔ)數(shù)據(jù)
// console.log('get', electronStore.get()) // 獲取數(shù)據(jù)
// console.log('delete', electronStore.delete()) // 刪除某項(xiàng)數(shù)據(jù)
// console.log('clear', electronStore.clear()) // 清除所有store數(shù)據(jù)
// console.log('has', electronStore.has()) // 檢測(cè)是否存在某條數(shù)據(jù)
export default electronStore

之后在主進(jìn)程引入

import ElectronStore from './electron-config/ElectronStore.js'
// 我們可以將ElectronStore實(shí)例放入到shareObject中，這樣在渲染進(jìn)程也可以使用
app.on('ready', async () => {
  // 多窗口數(shù)據(jù)存儲(chǔ)
  global.sharedObject = {
    ElectronStore,
    ...sharedObject
  }
})

由于渲染進(jìn)程中我們將sharedObject掛載在了window.$_SO中，所如下所示使用

以上就是electron-store存儲(chǔ)方式的使用。

三、后記

以上就是我們?cè)趀lectron應(yīng)用中常用的進(jìn)程間數(shù)據(jù)交互的方式。其中shareObject是在應(yīng)用關(guān)閉后，數(shù)據(jù)就消失了，electron-store則不會(huì)消失，會(huì)一直存在。這里關(guān)于electron-store還需要注意一下情況

存儲(chǔ)簡(jiǎn)單信息，不要存儲(chǔ)復(fù)雜大量信息，容易造成讀取速度變慢。
每一次get都是一次i/o操作，所以盡量少操作。

以上就是Electron store及shareObject進(jìn)程間數(shù)據(jù)交互存儲(chǔ)功能封裝的詳細(xì)內(nèi)容，更多關(guān)于Electron store shareObject數(shù)據(jù)交互的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: