Vue3でDexiejsを使う

setup関数で使う方法

Vue3からsetup関数が導入され、様々な値を簡単にリアクティブに扱うことができるようになりました。

セットアップ | Vue.js

Dexiejsもsetup関数で使うことが出来ます。

<script>
import { db } from "../db";
import { liveQuery } from "dexie";
import { useObservable } from "@vueuse/rxjs";

export default {
  name: 'List',
  setup() {
    return {
      db,
      sites: useObservable(
        liveQuery(async () => {
          return await db.articles
            .orderBy('date')
            .toArray();
        })
      )
    };
  },
}
</script>

liveQueryという関数をsetup関数内で使うことで、リアルタイムでDexiejs管理下のデータベースの情報を取得できます。

これまでは、ユーザーの入力によってDBを操作する必要がある場合は、watchやcomputedを使うのが基本でしたが、setup関数を使えば勝手にリアクティブになるため、動的に変更が反映されます。

また、setup関数はコンポーネントの描画の中でも早い段階で処理をされるため、「描画の際のデータ待ち」が減るというメリットもあります。

コンポーネントのインスタンスを参照しないため、setup の中で this を使うのは避けるべきです。setup は data プロパティ、computed プロパティ、methods が解決される前に呼び出されるため、setup の中では利用できません。

Composition API | Vue.js

リアクティブな変数と組み合わせると、Dexiejsを介したIndexed DBの複雑なデータの処理もsetup関数で動的に抽出できます。

ただ、先ほど引用文にもある通り、setup関数には制限もあるので、求める挙動によって通常のDexiejsの使い方と使い分ける感じになるかと思います。

methodsなどで使う場合

setup関数で使わず、従来通りmethodsなどでDBを呼び出す際も、一旦Dexie.jsをsetup関数でロードしてから使うことになります。

<script>
import { db } from "./db";

export default {
  name: 'App',
  setup() {
    return {
      db
    };
  },
  methods:{
    async hogeFunc(){
      return await this.db.articles
        .orderBy('date')
        .toArray();
    }
  }
}

dataやcomputedを受け取ることができるので、それらのプロパティと組み合わせて使う場合は、この方法になるかと思います。

こちらの場合は、indexed dbから取得するデータはリアクティブになっていないので、データの更新をする際は、別途何かの発火条件を感知して処理をする必要があります。

逆に、propsとcontextからのデータで処理できる場合は、setup関数でliveQueryを使う方のがベストでしょう。

大幅な変化があったため、非対応プラグインがあったりとまだまだ癖もあるVue3ですが、Dexiejsを使っている場合は、かなり使い勝手が上がっていると感じました。

特にsetup関数を含めたComposition APIの導入によって、リアルタイム性能が上がったため、Indexed DBとの親和性が上がったイメージです。

ですので、DexiejsユーザーはVue3へのアップグレードをテストする価値はあるなと感じました。