lowdb在Vue项目中的使用;
介绍:轻量级本地JSON数据库; 使用JSON为存储的数据结构,基于lodash(https://www.lodashjs.com/)开发;实际应用:Vue项目中Vuex存储数据,刷新页面时数据丢失的问题;此种情况下可用lowdb+LocalStorage适配器解决;即在路由钩子函数 beforeEach中重新加载数据,从lowdb中获取数据,并将获取的数据重新放入Vuex的state对象中;每次
·
介绍:轻量级本地JSON数据库; 使用JSON为存储的数据结构,基于lodash(https://www.lodashjs.com/)开发;
实际应用:Vue项目中Vuex存储数据,刷新页面时数据丢失的问题;此种情况下可用lowdb+LocalStorage适配器解决;
即在路由钩子函数 beforeEach中重新加载数据,从lowdb中获取数据,并将获取的数据重新放入Vuex的state对象中;每次更新state中的数据时, 同时也更新lowdb中存放的数据;
使用步骤:
1. 安装lowdb插件;
2. 创建一个dbUtils.js的文件,导出db对象
3. 在页面引入dbUtils.js文件,使用lowdb进行数据的CRUD操作;
dbUtils.js文件:
import low from 'lowdb'
import LocalStorage from 'lowdb/adapters/LocalStorage'
const adapter = new LocalStorage(`zw-lowdb-util`)
const db = low(adapter)
db.defaults({
sys: {},
dataList: []
}).write()
export default db
在页面实际使用:
<template>
<div>
<el-button @click="insertData">插入数据</el-button>
<el-button @click="getData">获取数据</el-button>
<el-button @click="updateData">修改数据</el-button>
<el-button @click="delData">删除数据</el-button>
</div>
</template>
<script>
import dbUtils from '@/libs/dbUtils.js';
export default {
data() {
return {
}
},
methods: {
insertData() {
// 注意:!!!!修改完数据之后必须调用write()方法写入数据库,否则新数据不生效!!!!
dbUtils.get('dataList').push({id: 1, name: '鲁班七号', type:'射手'},{id: 2, name:'王昭君', type: '法师'}).write()
dbUtils.set('sys', {name: '王者农药', type: '推塔游戏'}).write()
this.getData()
},
getData() {
let dataList = dbUtils.get('dataList').value()
let sys = dbUtils.get('sys').value()
console.log(dataList);
console.log(sys);
},
updateData() {
// 在dataList中找到id=1的对象,给其增加skill属性;
dbUtils.get('dataList').find({id: 1}).assign({skill: '射击'}).write()
// 给sys对象添加grades属性
dbUtils.set('sys.grades', ['青铜', '白银', '铂金']).write()
// dbUtils.set('sys', {name: '王者农药', type: '推塔游戏', grades: ['青铜', '白银', '铂金']}).write()
this.getData()
},
delData() {
// 删除id=1的对象
dbUtils.get('dataList').remove({id: 1}).write()
// 删除sys对象的grades属性
dbUtils.unset('sys.grades').write()
this.getData()
}
}
}
</script>
<style scoped>
</style>
更多推荐
已为社区贡献2条内容
所有评论(0)