Electron-vue开发实战2——引入基于Lodash的JSON数据库lowdb

前言

前段时间，我用electron-vue开发了一款跨平台（目前支持Mac和Windows）的免费开源的图床上传应用——PicGo，在开发过程中踩了不少的坑，不仅来自应用的业务逻辑本身，也来自electron本身。在开发这个应用过程中，我学了不少的东西。因为我也是从0开始学习electron，所以很多经历应该也能给初学、想学electron开发的同学们一些启发和指示。故而写一份Electron的开发实战经历，用最贴近实际工程项目开发的角度来阐述。希望能帮助到大家。

预计将会从几篇系列文章或方面来展开：

1. electron-vue入门
2. Main进程和Renderer进程的简单开发
3. 引入基于Lodash的JSON database——lowdb
4. 跨平台的一些兼容措施
5. 通过CI发布以及更新的方式
6. ...（想到再写）

说明

PicGo是采用electron-vue开发的，所以如果你会vue，那么跟着一起来学习将会比较快。如果你的技术栈是其他的诸如react、angular，那么纯按照本教程虽然在render端（可以理解为页面）的构建可能学习到的东西不多，不过在main端（electron的主进程）应该还是能学习到相应的知识的。

如果之前的文章没阅读的朋友可以先从之前的文章跟着看。

数据持久化存储的必要性

不像平时很多人写的一些demo，就是请求一下api然后把web页面展示出来就了事了。electron应用毕竟是个桌面级应用，如果思维还留在纯web开发的思路上，那么也就失去了用electron的意义了吧。

数据持久化存储实际上对于后端很熟悉。通常是指的是把内存里的数据以不同的存储模型存储到磁盘上，在需要的时候再从存储模型里读取读入内存中的整个流程。这里面的存储模型通常就是我们熟悉的数据库。说到数据库，很多人会想到MySQL，Mongodb，SQLite等等。常见的这些数据库都是Server-Client模式的，需要启动服务端——通常我们装的就是这个。但是你一般很少见到叫别人装个桌面软件的同时，叫别人配数据库的吧。

因为有些数据我们必须在本地存下来，方便下次使用的时候读取。而对于electron来说，既然让用户装MySQL、Mongodb是不太优雅的解决办法的话，那么如果能用其他方式，将数据存到本地而不用用户操心如何存储的，对我们和用户来说都是一件好事。

纯JavaScript数据库的选择

既然是JS技术栈的，于是我就找了一些纯JavaScript实现的数据库。经过初步筛选，我找到如下两个：

1. nedb 7800star（2018-02-12）
2. lowdb 7269star（2018-02-12）

比较

其中就目前来看，nedb用的更为广泛，star数更多（截止2018-02-12），而且有很多讲到nedb和electron配合使用的文章。不过，nedb已经有快两年没有维护了，而且原生不支持Promise，采用的是异步回调（虽然可以通过第三方插件实现Promise）。

lowdb是用JSON为基本存储结构基于lodash开发的，有lodash的加持，用起来很顺手。优势在于它在持续的维护，有不少好用的插件。并且很关键的是同步操作，采用链式调用的写法，写起来有种jQuery的感觉。再者，用JSON存储的数据，不管是调用还是备份都很方便，这也是让我很喜欢的一点。

综上，PicGo采用的是lowdb。

lowdb的初始化

由于electron给main进程和renderer进程都置入了Node的fs模块，所以我们可以很方便的在两端都使用跟fs相关的操作。而lowdb本质上就是通过fs来读写JSON文件实现的，正好符合我们的要求。所以根据官方给出的文档，我们首先先初始化一下。

为了操作fs更方便，不妨安装一个fs-extra。

创建一个datastore.js文件：

import Datastore from 'lowdb'
import FileSync from 'lowdb/adapters/FileSync'
import path