分享一个小巧轻快的 vue 存储引擎，支持 JSON、YAML 和本地存储

几年前，当我第一次学习 vue 的时候，就是从 todolist 开始的。

如今很多年过去了。今天发现一个 vue 的数据库引擎，可以做本地存储之用。于是，花了几个小时的时间，又重复造了个轮子。使用的是 bootstrap-vueUI。

功能： 添加、编辑、删除、自动保存

直接在 html 里写的，引入的 unpkg，没有在本地启动 vue。

介绍#

lowdb 是一款小巧轻便的数据库引擎，支持 json、yaml 和本地存储。

为什么使用 lowdb 做本地存储？#

由于本地存储不能直接存对象，因此还需要进行序列化，很麻烦。而使用 lowdb 则无需再进行处理，直接一股脑丢给它就是了。

如何使用？#

1、数据的获取

let todo = db.get('todo')Copy

如果没有数据，则返回 undefined

因此，拿到后需要判断一下再赋值

if(todo!=undefined){
    this.list=todo
}Copy

2、数据的保存

db.set('todo', this.list).write()Copy

自动保存#

在操作的时候，需要自动保存，这样重新载入网页，数据都在。

核心很简单，就是使用深度监控。只要数组内容发生变化，就会触发。

watch:{
    list:{
        handler:function(newValue,oldValue){
            console.log(newValue)
            this.save()
        },
        deep:true,//数组内容发生变化也监控
    }
}Copy

效果#

源码#

github.com/codetyphon/lowdb_todoli...

体验#

codetyphon.github.io/lowdb_todolis...