Vueでデータベースのオブジェクトを使いまわしたい

Question

Vue(vue-cli)とデータベースのnedbの組み合わせでCRUDアプリケーションを作ろうとしています。

データベースの初期設定をどこにかけばいいかわからなかったのでひとまず src/main.js に次のように書き込んであります。

var Datastore = require('nedb')
var db = new Datastore({
  filename: 'storage/app.db',
  autoload: true
})

データベースは一覧、作成、編集、削除など複数のページで必要になるため、共通の Datastore オブジェクトをグローバル変数のように使うのが良さそうに見えます。

現状 main.js 内では変数dbを特に活用していないのでESLintが「'db' is assigned a value but never used」エラーを出している状態です。

アプリケーション起動時（あるいはページ読み込み時？）に作った Datastore オブジェクトを各ページで共有して使えるようにするにはどのようにすればいいのでしょうか？

Vue は初めてなので根本的な考え方から間違っているかもしれません。よろしくお願いいたします。

Answer 1

別ファイルに分けてExport、使う部分でImportするのが良さそうかと思います。
module.exports、requireにするなど書き方は色々ありますが、vue-cliならこう書いちゃいますかね〜

/src/main.js
/src/utils/db.js

// utils/db.js
import Datastore from 'nedb';
const db = new Datastore({
  filename: 'storage/app.db',
  autoload: true
})
export default db

// main.js
import db from "utils/db.js";

// newしたインスタンスを使えるようになる