lowdb在Vue项目中的使用;

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

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

wen_文文

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值