點擊查看 Loki.js介紹
1.新建index.html、db.js文件；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
[v-cloak]{display: none;}
/*防止{{item.body}} 閃現*/
#app{width: 400px;margin:50px auto;
background-color: #ccc;
padding:10px;box-sizing: border-box;}
li{margin:10px 0;}
button{cursor: pointer;}
</style>
</head>
<body>
<div id="app">
<ol style="">
<div>
<button @click='addData' class="addbtn">添加新數據</button>
</div>
<li v-for="item in entities"
@key="item.$loki"
v-cloak>
{{item.body}}
<button @click="removeData(item.$loki)">刪除</button>
</li>
</ol>
<p v-if="!this.entities.length">還沒有數據，請點擊‘添加新數據’</p>
</div>
</body>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/lokijs"></script>
<script type="text/javascript" src="db.js"></script>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
entities:[]
},
created() { //請求數據庫數據
loadCollection('notes').then(collection => {
// console.log(collection)
const _entities = collection.chain()
.find()
.simplesort('$loki', 'isdesc')
.data() //處理數據
this.entities = _entities //獲取數據
console.log(this.entities)
})
},
methods:{
addData () {//添加數據
console.log('add')
loadCollection('notes').then(collection =>{
var entity = collection.insert({'body':'添加數據'})
db.saveDatabase()//保存新數據
this.entities.unshift(entity)
})
},
removeData (id) {//刪除數據
console.log(id)
const _entities = this.entities.filter((entity) => {
return entity.$loki !== id
})
this.entities = _entities //刪除數據
loadCollection('notes')
.then((collection) => {
collection.remove({
'$loki': id
})
db.saveDatabase() //數據庫刪除數據
})
}
}
})
</script>
</html>
3.db.js代碼：（Lokijs配置數據庫）
const db = new loki('notes', { //新建數據庫集合名爲 notes
autoload: true,
autoloadCallback: databaseInitialize,
autosave: true,
autosaveInterval: 3000
})
function databaseInitialize() {
const notes = db.getCollection('notes') //獲取notes數據庫
if (notes === null) {
db.addCollection('notes') //若notes不存在，則增加
}
}
function loadCollection(collection) { //調用數據的方法
return new Promise(resolve => {
db.loadDatabase({}, () => {
const _collection = db.getCollection(collection) || db.addCollection(collection)
resolve(_collection)
})
})
}