Vue3 Composition API

2021年9月16日仕事

こんにちは！ものレボの川田です。

今更ではありますが、今日は Vue3 の Composition API についてちょっとだけ書いておこうかと思います。

というのも、我々の新たなプロジェクトにおいてバックエンドもフロントエンドもアップデートしていくので、その際のフロントエンド準備としてその利用機会があったからです。

Composition APIの有用性はなんと言っても分離可能性だと思います。分離可能性とは単純な話、「今ままではモジュールとして分離できなかった部分が分離できるようになった」ということです。

例えば、Component内のcomputedな変数は他の場所で汎用的に使いまわせて欲しい変数であっても、外部モジュールにまとめておいて、いろんなComponentで再利用するとかできなかったですよね？

それが簡単にできるというのが Composition API の一番いいところだと思います。

もちろん分離できるのは computed なものだけではなく多岐にわたるんですが、とりあえず今回は computed な例を挙げておきますね。

さて、作りたいのは「常に画面幅をモニターしてモバイルな幅かどうかを判定するBooleanな変数」です。

今回は Quasar を前提にします。

まず、モジュールファイルとして Utils.ts を作成します。

Quasarで用意されているscreenオブジェクトを利用して画面幅をモニタリングするためです。

Utils.jsに以下のように記述します。

import { useQuasar } from 'quasar'

useQuasarはこれまで Component 内で

this.$q

とアクセスしていたオブジェクトへの参照を返します。

今回作る computed な変数は isMobile という名前にしましょう。

import { useQuasar } from 'quasar'

export const isMobile

さて、ここからが Composition API らしいところです。

まず、isMobileはcomputedな参照型となりますから、computedな変数を作成するmethodとその型を取得します。

import { computed, ComputedRef } from 'vue'
import { useQuasar } from 'quasar'

export const isMobile

そして、isMobileに対してcomputedな変数を宣言します。

import { computed, ComputedRef } from 'vue'
import { useQuasar } from 'quasar'

export const isMobile: ComputedRef<boolean> = computed()

computedの引数はComponent内で書いていたのと同様のSupplierの形で記述します。

import { computed, ComputedRef } from 'vue'
import { useQuasar } from 'quasar'

export const isMobile: ComputedRef<boolean> = computed((): boolean => {
    // return Boolean
})

あとはQuasarのscreenオブジェクトを利用して返すだけ。

import { computed, ComputedRef } from 'vue'
import { useQuasar } from 'quasar'

export const isMobile: ComputedRef<boolean> = computed((): boolean => {
    const $q = useQuasar()
    return $q.screen.lt.sm
})

できました。

これで色んなComponentの中で使いまわせます。

<template>
    <h1>{{isMobile ? 'モバイルですよ' : 'モバイルじゃないですよ'}}</h1>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { isMobile } from '/path/to/Utils'

export default defineComponent({
    setup () {
        return {
            isMobile
        }
    }
})
</script>

これだけで結構嬉しいですよね。