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>