Vue + Dexie + IndexedDBで作る簡単ノートアプリ

事前準備

Vueアプリを作成します。コマンドラインからもいいですし、@vue/cliがインストールされている環境ならVueUIからだとGUIで設定ができるので楽です。

vue create アプリ名

初期プラグインは好きなものをインストールしてください。特別ない場合は、全てyesで良いでしょう。

Dexieをインストール

ここは簡単です。他のプラグインと同じようにyarnなどでインストールします。

yarn add dexie

Dexieの設定

Dexieを読み込むファイルを用意

設定ファイルから読み込んだ管理が楽なので、

db/index.jsにDexieの設定を用意して、コンポーネントから読み出します。

import Dexie from 'dexie';

const db = new Dexie('testDB');
db.version(1).stores({
  notes: '++id, fileName, noteTxt, createAt, updatedAt',
});

export default db;

ここでテーブルの定義も行っておきます。今回はノートアプリなので、notesというテーブルを定義しました。

メソッドを用意する

本来なら共通のMixinなどで書くべきですが、今回はテストアプリなので全てApp.vueに書いてそこから読みだすようにします。

methods: {
  listNote(){
  },
  getNote(){
  },
  putNote(){
  },
  deleteNote(){
  },
}

上から、

• ノート一覧表示用
• ノート詳細表示用
• ノート更新用（新規作成も含む）
• ノート削除用

となります。

表示コンポーネントを用意する

続いて表示側のコンポーネントを用意します。

List.vue

ノート一覧を表示させます。

<template>
  <div>
    <h2>ノート一覧</h2>
  </div>
</template>

<script>
export default {
  name: 'List'
}
</script>

中身はまだ空です。