介绍:轻量级本地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>

 

 

 

Logo

前往低代码交流专区

更多推荐