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

更新時間：2022年09月15日 09:08:30 作者：做什么夢呢

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

一、前言

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

二、存儲方案

1.shareObject

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

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

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

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

在渲染進程中使用如下

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

之后就是在頁面中存取

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

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

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

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

最終在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
}

之后我們在background.js中將這些變量初始化到shareObject中，如下圖所示

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

我們在渲染進程就可以在控制臺打印后看到我們初始化的變量，如下圖

2.electron-store

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

安裝依賴

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

創(chuàng)建實例文件

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

之后在主進程引入

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

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

以上就是electron-store存儲方式的使用。

三、后記

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