実行環境とバージョン一覧

macOS Mojave v10.14.6
npm v6.9.0
node v10.16.3
electron v1.4.13

Install

まずはNeDBをインストールしましょう

npmの場合

$ npm install --save nedb

もしくは

yarnの場合

$ yarn add nedb

Settings

rendererディレクトリの配下にdatastore.jsというファイルを作成する

$ cd <YOUR_PROJECRT>
$ touch ./src/renderer/datastore.js

datastore.jsの中身は以下のようにする

./src/renderer/datastore.js

import path from 'path';
import { remote } from 'electron';
import Datastore from 'nedb';

const dbPath = path.join(remote.app.getPath('userData'), '/data.db');

// DB初期化
export default new Datastore({
  autoload: true,
  filename: dbPath,
});

上記ではelectronのアプリケーションディレクトリのdata.dbファイルを読み込む処理をしています。
data.dbがない場合は上の処理でファイルが作成されるのでエラーがでることはありません。

main.jsに以下の処理を追記する

./src/renderer/main.js

...

import db from './datastore';
Vue.prototype.$db = db;

...

以上でどのコンポーネントからもDBを呼び出すことができるようになりました。やったね！

usage

このままだとdata.dbの中身は空なのでデータを引っ張ってくることができません。
なのであらかじめ適当なデータを突っ込んでから
electron-vueでdbからデータを取得していきましょう

データを挿入する

まず適当にdata.dbにデータを突っ込んでみましょう。

main.jsに以下の文を追記します。

./src/renderer/main.js

...

import db from './datastore';

Vue.prototype.$db = db;
// 今回追加する処理
const docs= [
  { name: '山田太郎', age: 20 },
  { name: 'のじ先生' age: 10 },
];

db.find({}, (err, doc) => {
  // 初回のみ：dbのデータが空だった場合、テーブルの構築をする
  if (!doc.length) {
    db.insert(docs);
  }
});

...

一度アプリをビルドする

$ yarn run dev

ここまで終われば、無事data.dbにデータを入れることができました。
今度はelectorn-vueでそのデータを取得してみましょう。

electron-vueでdbからデータを取得する

適当なコンポーネントのscript部分に以下を記述する
※ 以下ではApp.vueで記述していると想定して書いています。

./src/renderer/App.vue

<script>
this.$db.find({}, (err, doc) => {
  console.log(doc);
});
</script>

はい。以上でおしまいです。
あとはビルドしてみてコンソール出力に格納されたデータが表示されている確認してみてください。

$ yarn run dev

ほんでは

electron-vue でNeDBを使用する