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だから？

教えて偉い人！！