聊聊 electron-vue-serialport 的添加数据持久化分析以及解决方案，关联 pouchdb nedb vuex-persistedstate

Posted 2021-03-09

什么是 数据持久化？

数据持久化其实就是指期望把数据长期存储下来，而这个问题被拆分成很多场合，用这篇记录一下一些细节和过程。

起因

起因 electron-vue-serialport 使用的 electron-vue 基础 vue-admin-template 在 yarn run dev 下 js-cookie 正常使用，但 build 后无法获取存放在 Cookie 中的 token 数据，经过写入后读取的测试返回仍然是 undefined 。

这也就说明它可能并非真正的同步模式，考虑到有太多组件的融合，最初判断是 electron 的 Cookies 炸了，例如需要时间连接本地数据，但可能加载过程过快，无法在获取 token 前完成数据的载入，也有可能是本来就存在的版本 bug 之类的。

准备解决方案

既然存在 bug ，然后也没法通过更新环境解决的情况下，就直接改写之。

• 既然是要 cookie 数据，那就用其他数据模拟一个接口送回即可。
• 既然要持久化数据，考虑到之后也有小型数据库需求，不妨一起考虑。

于是选取了 pouchdb 和 nedb 做长期存储，不过此时将失去 Cookies 的过期功能，但好像也并非所要的功能。

实践结论

为什么我在做仪器类客户端还需要这个登录的功能是因为，设备机型的登录表示你所使用的配置版本，这样的好处就是统一入口，然后分发不同的功能接口，对于一个公司来说相对规范化整体框架。

最早怀疑是 mock 在 electron 无法工作的原因，后来经过检查是 build 后的 electron 的 js-cookie 无法工作，然后观察 js-cookie 的设计模式是同步的，这与上述的数据库的使用相违背，不得已修正为异步调用。

其中 pouchdb 存在的问题是 electron 的 Windows 32 bit 无法编译通过，而 pouchdb-browser 存在于 浏览器 的 local storage 中无法满足我需要的本地化文件，就换了 nedb ，辛苦写了模型对上去后，一切正常工作后。

又产生新的问题，就是 Cookies 数据没有先于 login 验证前加载完成，导致需要重新登录，这是因为 electron 关闭后，要加载数据回来需要的一些异步时间，而页面启动后，不可能会允许写一段毫无意义的延时同步数据（下下策），那么如何解决呢？

回到原点

最后放弃写垃圾代码注入其中，改用 vuex 的 vuex-persistedstate 插件，自动在框架内部同步数据，强组件绑定关系。

很意外的是，如果一开始我就想清楚我想要的效果，可能就会少走这些弯路，但实际上也是由于，我并不了解 electron vue nodejs 等数据持久化组件的选取，所以要预先了解和学习一波才能应用到其中。

最后代码反而删减了，基本没有做任何改动，也没有添加多余的模拟接口注入。

更新在 remove auth Cookies and use vuex-persistedstate

个人感悟

在现代 javascript 的设计模式上可能要缓存+同步数据，但实际上深度绑定组件的话，可以避开不必要的异步数据同步的问题。

最后，关联上一篇博文，因为在实践过程中分析了一下 js 的 import 机制，如果有 python 经验的可能会有些疑惑是否一致，当然答案是基本一致，可以放心的到处 import 。