Vue.js + Dexie: tableの取得でちょっとハマった件 (未解決)
Vue.jsのデータ永続化にLocalStrageではなくIndexedDBを使ってみようということで、Dexieを導入。
チュートリアルに従って、まずこんな感じでDatabaseを作成。
async createDB(){
this.db = await new Dexie('testdb');
this.db.version(1).stores({friends: 'name, shoeSize'});
}
当然、この命令を毎回使ってやると書き込み、読み込みともにうまくいくんだけど、version(1)のkey nameを毎回定義しているイメージなのでなんとも気持ち悪い。なので、試しにdb作成後下記に書き換え。
async createDB(){
this.db = await new Dexie('testdb').open();
// storesの行を削除
}
存在しているDBを直接OPENしてやるイメージで、当然動くだろと思っていたら、データの追加や取得を下記コードで実行しようとすると、エラーが出る。
async addData(){
await this.db.friends.put({name:"Hoge", shoeSize:28.0});
},
async getData() {
this.testdata = await this.db.friends.where('name').equals('Hoge').toArray();
}
エラーメッセージ:
TypeError: Cannot read property 'put' of undefined
公式Docのこの書き方(Dexie.[table])に該当すると思うんだけど、tableを毎回storeしなければならないとは当然書いていないし、さすがにそんなことないと思うんだが…
logを確認すると、openまではうまくいってそうだけど、tableのアクセスがうまくいってない…
で、Docをさらってみると、もう一つtable関連の命令があった→Dexie.table()
変数として結果を保管するのは1.3までは危なかったけど、1.4以降は大丈夫だよ!という感じなので、基本は上のプロパティを使ってよ、メソッドも大丈夫だけど、ということか?
まあ、考えても他に手がないので下記に変更。
async addData(){
await this.db.table('friends').put({name:"Hoge", shoeSize:28.0});
},
async getData() {
this.testdata = await this.db.table('friends').where('name').equals('Hoge').toArray();
}
これでうまくいった模様…なんでだ?Vue.jsだから?
教えて偉い人!!