Vue + Dexie + IndexedDBで作る簡単ノートアプリ
公開日:2022年1月9日
事前準備
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>
中身はまだ空です。
新着ノート
-
Gitlab PagesのHUGOイメージでUNTRUSTED signatureエラーの対処方法
hugo, gitlab
公開日:2022年7月27日
-
Cloudflare Pages Functionsを使ってみた
gridsome, cloudflare
公開日:2022年6月2日
新着コード
-
Vue.js
公開日:2022年4月18日
-
Vue.js
公開日:2022年4月13日