几年前,当我第一次学习 vue 的时候,就是从 todolist 开始的。
如今很多年过去了。今天发现一个 vue 的数据库引擎,可以做本地存储之用。于是,花了几个小时的时间,又重复造了个轮子。使用的是 bootstrap-vueUI。
功能:添加、编辑、删除、自动保存
直接在 html 里写的,引入的 unpkg,没有在本地启动 vue。
介绍
lowdb 是一款小巧轻便的数据库引擎,支持 json、yaml 和本地存储。
为什么使用 lowdb 做本地存储?
由于本地存储不能直接存对象,因此还需要进行序列化,很麻烦。而使用 lowdb 则无需再进行处理,直接一股脑丢给它就是了。
如何使用?
1、数据的获取
let todo = db.get('todo')
如果没有数据,则返回 undefined
因此,拿到后需要判断一下再赋值
if(todo!=undefined){this.list=todo}
2、数据的保存
db.set('todo', this.list).write()
自动保存
在操作的时候,需要自动保存,这样重新载入网页,数据都在。
核心很简单,就是使用深度监控。只要数组内容发生变化,就会触发。
watch:{
list:{handler:function(newValue,oldValue){console.log(newValue)
this.save()},
deep:true,// 数组内容发生变化也监控
}
}
效果
源码
https://github.com/codetyphon/lowdb_todolist
体验
https://codetyphon.github.io/lowdb_todolist/index.html