lowdb 在electron 使用中注意的问题
前言
可能很多人都没有听说过这个lowdb,但是它的确存在,而且在electron 中用到还是挺多的。
如何在electron 的render 进程中是引用electron 模块。
我们知道一个问题,那就是app 模块是main 进程中特有的那么,render 进程中要使用必须这样:import { app, remote } from 'electron' // 引入remote模块
然后remote.app 这样使用即可。
所以我们在render中使用lowdb可以这样使用:
import Datastore from 'lowdb'
import FileSync from 'lowdb/adapters/FileSync'
import path from 'path'
import fs from 'fs-extra'
import { app, remote } from 'electron' // 引入remote模块
const APP = process.type === 'renderer' ? remote.app : app // 根据process.type来分辨在哪种模式使用哪种模块
const STORE_PATH = APP.getPath('userData') // 获取electron应用的用户目录
const adapter = new FileSync(path.join(STORE_PATH, '/data.json')) // 初始化lowdb读写的json文件名以及存储路径
const db = Datastore(adapter) // lowdb接管该文件
export default db // 暴露出去
开发模式和生产模式初始化路径问题
在开发模式的时候,通过 APP.getPath('userData') 获取到的路径形如: /Users/molunerfinn/Library/Application Support/Electron (macOS下)。这个是一个已经自动创建好的路径。所以在开发模式的时候,初始化路径是已经存在的。
然而在生产模式下不是这样。生产模式下,第一次打开应用的过程中, APP.getPath('userData') 获取的路径并未创建,而 datastore.js 却已经被加载。所以这个时候初始化路径并不存在。
所以我们必须在 datastore.js 里做一次路径是否存在的判断:
此处的fs是来自fs-extra模块
if (process.type !== 'renderer') {
if (!fs.pathExistsSync(STORE_PATH)) { // 如果不存在路径
fs.mkdirpSync(STORE_PATH) // 就创建
}
}
唯一标识的id字段
用过MySQL的人大多都会在表里初始化一个自增的id字段作为数据的唯一标识。而lowdb虽然无法很方便地创建一个自增的id字段,但是通过 lodash-id 这个插件可以很方便地为每个新增的数据自动加上一个唯一标识的id字段。
{
"height": 514,
"type": "weibo",
"width": 514,
"id": "7f247aa7-ffeb-4bb1-87f1-a0d69824ec78"
}
初始化也很方便:
import LodashId from 'lodash-id'
const db = Datastore(adapter)
db._.mixin(LodashId) // 通过._mixin()引入
初始化完整代码
通过上述的踩坑,PicGo的初始化代码如下,仅供参考:
import Datastore from 'lowdb'
import LodashId from 'lodash-id'
import FileSync from 'lowdb/adapters/FileSync'
import path from 'path'
import fs from 'fs-extra'
import { remote, app } from 'electron'
const APP = process.type === 'renderer' ? remote.app : app
const STORE_PATH = APP.getPath('userData')
if (process.type !== 'renderer') {
if (!fs.pathExistsSync(STORE_PATH)) {
fs.mkdirpSync(STORE_PATH)
}
}
const adapter = new FileSync(path.join(STORE_PATH, '/data.json'))
const db = Datastore(adapter)
db._.mixin(LodashId)
if (!db.has('uploaded').value()) {
db.set('uploaded', []).write()
}
if (!db.has('picBed').value()) {
db.set('picBed', {
current: 'weibo'
}).write()
}
if (!db.has('shortKey').value()) {
db.set('shortKey', {
upload: 'CommandOrControl+Shift+P'
}).write()
}
export default db
不同进程读取的数据不一致。
lowdb在使用的过程中会遇到一个大坑在于,如果就按照基本操作,那么有可能出现我在 main 进程里存入的值,在 renderer 进程里读不到。
为啥?因为直接引用的 db 实际上只是那个时刻在内存里的数据。lowdb在使用过程中会把JSON数据读入内存中。只有在需要写操作的时候才会将新的数据写入磁盘。
db.read().get('xxx').value()
db.read().set('xxx', 'xxx')
为了避免这么麻烦呢,最后是前端的db传递给后端处理最为合适,不要搞两套。
lowdb 在electron 使用中注意的问题的更多相关文章
- electron 使用中的注意事项
一.ELECTRON引用JQUERY.JS electron不能像正常的html文件引用jq.js那样(为嘛不造),elecron引用jq.js的方式为: <script>window.$ ...
- Vue 全家桶 + Electron 开发的一个跨三端的应用
代码地址如下:http://www.demodashi.com/demo/11738.html GitHub Repo:vue-objccn Follow: halfrost · GitHub 利用 ...
- electron教程(四): 使用electron-builder或electron-packager将项目打包为可执行桌面程序(.exe)
我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(二): http服务器, ws服务器, 子进程管理 electron教程(三): ...
- 大型Electron应用本地数据库技术选型
开发一个大型Electron的应用,或许需要在客户端存储大量的数据,比如聊天应用或邮件客户端 可选的客户端数据库方案看似很多,但一一对比下来,最优解只有一个 接下来我们就一起来经历一下这个技术选型的过 ...
- 使用electron+vue开发一个跨平台todolist(便签)桌面应用
# 1 最近一直在使用electron开发桌面应用,对于一个web开发者来说,html+javascript+css的开发体验让我非常舒服.之前我一直简单的以为electron只是张网页加个壳,和那些 ...
- 【electron+vue3+ts实战便笺exe】一、搭建框架配置
不要让自己的上限成为你的底线 前言 诈尸更新系列,为了跟上脚步,尝试了vue3,在学习vue3的时候顺便学习一手electron和ts,本教程将分别发布,源码会在最后的文章发布.因为还在开发中,目前也 ...
- electron 应用开发优秀实践
vivo 互联网前端团队-Yang Kun 一.背景 在团队中,我们因业务发展,需要用到桌面端技术,如离线可用.调用桌面系统能力.什么是桌面端开发?一句话概括就是:以 Windows .macOS 和 ...
- 基于electron+vue+element构建项目模板之【打包篇】
1.概述 开发平台OS:windows 开发平台IDE:vs code 本项目使用了一款Vue-CLI插件(vue-cli-plugin-electron-builder) 来构建 electron ...
- Electron使用与学习--(页面间的通信)
目录结构: index.js是主进程js. const electron = require('electron') const app = electron.app const BrowserWin ...
- Electron使用与学习--(基本使用与菜单操作)
对于electron是个新手,下面纯属个人理解.如有错误,欢迎指出. 一.安装 如果你本地按照github上的 # Install the `electron` command globally ...
随机推荐
- 安卓开发Android Studio新版本menu菜单不显示的问题
在新版本的Android Studio 直接配置菜单会显示不出来,新版本新建菜单经节如下: activity_main.xml(布局文件): <?xml version="1.0& ...
- JS5-PC端网页特效
常见offset系列属性作用 常见client系列属性作用 常见scroll系列属性作用 封装简单动画函数 写出网页轮播图案例 offset 偏移量,使用offset相关属性可以动态的得到该元素的位置 ...
- [.Net]使用Soa库+Abp搭建微服务项目框架(三):项目改造
上一章我们说道,如果要使各模块之间解耦,使得各自独立成服务,首先要解除各个模块之间的引用关系. 还记得上一章我们的小项目吗 ?们回到之前的代码上来,当前的项目架构如下图: 这次的任务是将它改造成 ...
- Zabbix6.0使用教程 (三)—zabbix6.0的安装要求
接上篇,我们继续为大家详细介绍zabbix6.0的使用教程之zabbix6.0的安装部署.接下来我们将从zabbix部署要求到四种不同的安装方式逐一详细的为大家介绍.本篇讲的是部署zabbix6.0的 ...
- kettle多个表一起迁移-通过配置文件配置需要同步的字段,非全字段同步
kettle多个表一起迁移-通过配置文件配置需要同步的字段,非全字段同步 欢迎关注博主公众号「Java大师」, 专注于分享Java领域干货文章, 关注回复「999」获取本例源文件, 免费领取全网最热的 ...
- QT 自定义QGraphicsItem 缩放后旋转 图形出现漂移问题
实现自定义QGraphicsItem缩放和旋转时,遇到了这样一个问题:将item旋转一个角度,然后拖拽放大,再次进行旋转时图像会发生漂移.原本以为是放大后中心点位置没有改变,导致旋转时以原中心的旋转出 ...
- java多线程的锁整理
参考,欢迎点击原文:https://www.jianshu.com/p/473a3d96a1b0(java锁总结) https://www.jianshu.com/p/dcabdf695557(Ree ...
- [vscode]使用cmake时将命令行参数传递给调试目标
一.简介 本文介绍了在vscode中使用cmake工具时,如何传递参数给编译目标的方法. 前提:使用vscode+cmake编译C/C++程序. 二.方法 在.vscode/目录下新建settings ...
- 记录--用了那么久的Vue,你了解Vue的报错机制吗?
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 Vue的5种处理Vue异常的方法 相信大家对Vue都不陌生.在使用Vue的时候也会遇到报错,也会使用浏览器的F12 来查看报错信息.但 ...
- 一款超酷、功能强大的一体化网站测试工具:Web-Check
今天给大家一款网站一体化测试工具:Web-Check! Web-Check 是一款功能强大的一体化工具,用于发现网站/主机的相关信息.用于检查网页的工具,用于确保网页的正确性和可访问性.它可以帮助开发 ...