vue-cli+Electron项目中___ Lowdb的初步使用


前言：
此篇文章基于篇一和篇二中搭建好的项目进行，项目中安装了Element， 相应的代码地址：https://github.com/ddx2019/vue-electron-demo

Lowdb

Lowdb ,一个小型的本地JSON数据库; 用于Node，Electron和浏览器的小型JSON数据库。由Lodash驱动.用法如下：

1. 在项目的public 下有一个本地JSON文件，db.json如下:

示例的JSON中，该json是一个大对象，对象内有一大数组，所有的内容都在RECORDS数组中，数组的每一个元素又是一个对象，且每一个对象都有唯一的标志字段，uid；

db.json （ 在项目的public下新建一个json文件夹，在它下面新建一个db.json文件，内容如下：）

1
2
3
4
5
6
7
8
9
10
11
12
13
{
    "RECORDS":[
        {
            "uid": 1,
            "title": "lowdb is awesome",
            "count": 1
        },
        {
            "uid":2 ,
            "user": {"name": "typicode","age":18}
        }      
]
  }

在这里插入图片描述

2. 安装Lowdb

1
yarn add lowdb

3. 在一个单独的文件中进行封装

在src下新建一个utils文件夹，utils下新建一个datastore.js文件（这两个名字可以任意取，位置也可自选）

datastore.js：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import DataStore from 'lowdb'
import FileSync from 'lowdb/adapters/FileSync'
import path from 'path'

export default {
 install (Vue) { // 该行固定写法，安装vue.js插件时，关于install方法，参考vue官网，https://cn.vuejs.org/v2/api/
    Vue.prototype.mydb = function (FileName) { //  将 mydb 这个方法挂载在Vue的原型上,FileName是json文件的名字
      const NamePath = path.join(__static, `/json/${FileName}.json`)// 拿到传入的json的存储路径;该json文件存在public文件夹下的json文件夹下。
      const adpets = new FileSync(NamePath) // 初始化lowdb读写的json文件名以及存储路径
      const data = DataStore(adpets) // lowdb接管该文件
      return data
    }
  }
}

注意：

  1. 这里的__static是lowdb提供的，故能在vue-cli3中使用，它取到的是当前项目的public的路径，
  2. 如,我的项目在G盘，我项目的名字是vue-electron-demo,这里的 __static就是： G:\vue-electron-demo\public
  3. 新版的 eslint 下,可能会检测出__static未定义，导致项目报错，此时可以选择去除eslint的对未定义变量的检测规则，
    如： 在package.json中，加 "rules": { "no-undef": "off" }即可。

4. 在main.js中引入并挂载在vue实例，方便在全局使用:

1
2
3
import Vue from 'vue'
import db from '@/utils/datastore.js'
Vue.use(db) // 将db挂载在vue 的实例上，在任意组件中都可以通过this.mydb访问到 datastore.js中的mydb方法

5. 在组件中使用，LowdbTest.vue中：

LowdbTest.vue （在views文件夹下新建了一个test文件夹，test文件夹下新建文件LowdbTest.vue）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<template>
    <div>
        <el-button @click="getData">获取数据</el-button>
        <el-button @click="insertData">插入数据</el-button>
        <el-button @click="updateData">修改数据</el-button>
        <el-button @click="delData">删除数据</el-button>
    </div>
</template>
export default {
    name:'home',
    methods:{
        getData(){
            // this.mydb('db') 访问挂载在Vue上的mydb方法，并将json文件名‘db’传给该方法
            let data=this.mydb('db').get('RECORDS').find({uid:2}).value();//找到项目的 public下的db.json文件中的，RECORDS下的，字段uid为2的对象;
            console.log(data); // {uid: 2, user: {…}}uid: 2user: {name: "typicode", age: 18}__proto__: Object
        },
        insertData(){
           // 给项目中 public下的db.json文件的RECORDS数组新增一个元素
            this.mydb('db').get('RECORDS').push({ uid: 4, name: 'xxx', info: '新纪录' }).write();
            // push成功后可以查看到，db.json中多了一个比之前多了一个 { uid: 4, name: 'xxx', info: '新纪录' }
        },
        updateData(){
            // 找到db.json里RECORDS数组中，uid为1的元素（是一个对象），并把它的title改为  Lowdb
           this.mydb('db').get('RECORDS').find({ uid:1 }).assign({ title: 'Lowdb'}).write()
           // 修改成功后，可查看到db.json中的uid为1的对象的title的值为 Lowdb
        },
        delData(){
            //删除db.json里RECORDS数组中 uid为1的对象，删除的前提是uid为1的数据存在
             this.mydb('db').get('RECORDS').remove({ uid: 1 }).write()
        }
    }
}

如果是按顺序执行的上面的getData、insetData、updateData、delData方法 , 最终的db.json应该是：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
  "RECORDS": [
    {
      "uid": 2,
      "user": {
        "name": "typicode",
        "age": 18
      }
    },
    {
      "uid": 4,
      "name": "xxx",
      "info": "新纪录"
    }
  ]
}

在实际的项目中，实际可能只用得到获取本地JSON的数据,并将数据渲染到页面上。

这里只是简单的使用示例，详细用法 参考 https://github.com/typicode/lowdb