vue-cli+Electron項目中___ 小型本地JSON數據庫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文件，內容如下：）

{
    "RECORDS":[
        { 
            "uid": 1, 
            "title": "lowdb is awesome", 
            "count": 1
        },
        {
            "uid":2 ,
            "user": {"name": "typicode","age":18}
        }      
]
  }

2. 安裝Lowdb

yarn add lowdb 

3. 在一個單獨的文件中進行封裝

在src下新建一個utils文件夾，utils下新建一個datastore.js文件（這兩個名字可以任意取，位置也可自選）

datastore.js：

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實例，方便在全局使用:

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）

<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應該是：

{
  "RECORDS": [
    {
      "uid": 2,
      "user": {
        "name": "typicode",
        "age": 18
      }
    },
    {
      "uid": 4,
      "name": "xxx",
      "info": "新紀錄"
    }
  ]
}

在實際的項目中，實際可能只用得到獲取本地JSON的數據,並將數據渲染到頁面上；
也可在electron中使用Lowdb指定存儲位置進行數據本地持久化存儲。

這裏只是簡單的使用示例，詳細用法 參考 https://github.com/typicode/lowdb