Zenn
🥝

VueUseのcomputedAsyncについて調べてみた。

2024/08/29に公開
TypeScript
Vue 3
VueUse
tech

実務でVueUseを使う機会があり、これを期に気になっていたcomputedAsyncについて自分なりの知見をまとめようと思います。
コードベースはほとんど、[ICS MEDIA様]https://ics.media/entry/230606/ のを活用させていただいています。

computedAsyncとは

https://vueuse.org/core/computedAsync/#computedasync
説明

Computed for async functions

公式の英語で書かれている通り、computedでasync関数が使用できますよって事ですね。
Vueの標準であるcomputedは非同期処理をサポートしておらず、単体で解決ができない状態です。
なのでwatchと併用で実装したり、vue-async-computedなどのライブラリを使用する必要がありました。
それを解決してくれるのが本題のcomputedAsyncです。

引数

App.vue
import {ref} from "vue";
import { computedAsync } from "@vueuse/core";

const enabled = ref(false);
const address = computedAsync(async ()=> {処理},"初期値",enabled);

addressという定数を定義しています。

処理

この中で非同期処理とreturn文を返します。使用例を後述しますが例えば郵便番号を入力して住所を取得などをする場合バリデーションやデータの取得などの処理をこの中で行います。

引数2(定義値の初期値)

引数2には、定義した値の初期値を設定ができます。空の設定もできますしなにか文言を追加することもできます。

引数3(計算中のフラグ設定)

計算中の状態を示すリアクティブフラグになります。ここに定義する値はrefの値でなければなりません。計算中の場合はtrueを返して、計算が完了するとfalseを返します。
なのでtrue時にローディング表示をして、false時に値を表示するなどの制御で使用することができます。

使用例

App.vue
<script setup lang="ts">
  import { ref } from "vue";
  import { computedAsync,useDebounce } from "@vueuse/core";
  const postalCode = ref("");
  const debouncedPostalCode = useDebounce(postalCode, 1000);
  const evaluating = ref(false);
  const ENDPOINT = "https://zipcloud.ibsnet.co.jp/api/search";
  const address = computedAsync(
    async () => {
      const url = `${ENDPOINT}?zipcode=${postalCode.value}`;
      if (debouncedPostalCode.value.length === 0) {
        return "郵便番号を入力してください。";
      }
      if (debouncedPostalCode.value.length !== 7) {
        return "7桁の郵便番号を入力してください";
      }
      const res = await fetch(url);
      const json = await res.json();
      const results = json.results;
      if (results === null) {
        return "住所が見つかりませんでした";
      }
      const result = results[0];
      return result.address1 + result.address2 + result.address3;
    }, 
    "",
    evaluating
  );
</script>

<template>
  <div>
    <input type="text" v-model="postalCode" placeholder="7桁の郵便番号を入力" />
    <p v-show="evaluating">取得中...</p>
    <p v-show="!evaluating">{{ address }}</p>
  </div>
</template>


初期表示

入力途中

取得中

住所取得

取得できなかった時
このように、それぞれの画像に各データの状態がわかるかと思います。
enabledの状態が取得中はtrueになり、取得後はfalseになっています。
つまり、条件分岐での計算やデータの取得中はtrueになり計算結果が帰った場合はfalseになります。

まとめ

実際使ってみて思ったのは、簡単な検索機能やソートなどはこれを活用すれば実装負担が減りそうです。
他にもVueUseでは歯がゆいところに手が届く関数などがあるので、実務で実際に使用すると良いかもしれないです。

参考資料

https://vueuse.org/
https://ics.media/entry/230606/

Discussion