Vue.jsのcomputedでのaxios通信

Question

前提・実現したいこと

computed内でaxiosのGET通信から値を取得して表示したい。

※computedのメソッドはリアクティブに検知されているものとします。
以下はvueファイルのtemplate部分です。

<template>
  <div>{{ computedTest }}<div>
</template>

試したこと

• computed内にcomputedTest()というメソッドを作り、何もしないで任意の文字列をreturnした。

→　文字列がそのまま表示された。（OK）

computed: {
    computedTest() {
      let aa = 'あああ';
      return aa;
    }
}
// あああ

• axiosを使ってGET通信

→　何も表示されない。

computed: {
    computedTest() {
      let aa = '';
      axios.get('xxxxx').then(function(res) {
        aa = res.data.xxx;
      });
      return aa;
    }
}
// 非同期通信なので、先に「return aa」が走ってしまうため、''が表示される。

質問

上記の「試したこと」の2番目を改善し、async/awaitを使ってaxios通信が完了してから「return aa」するようにしましたが、何も表示されません。
考え方、やり方が間違っているのでしょうか？

computed: {
    async computedTest() {
      let aa = '';
      await axios.get('xxxxx').then(function(res) {
        aa = res.data.xxx;
      });
      return aa;
    }
}
// 何も表示されない

宜しくお願い致します。

Answer 1

computed では非同期処理はサポートされてません。
何らかのパラメータの変更に応じて再度通信を実行したいということだと思いますので、data と watch の組み合わせでなんとかなります。

どうしても computed でやりたいのなら vue-async-computed というプラグインがあるのでそちらを使ってみるというのも手かもしれません。

Comments

[tampopopofu]

ご回答ありがとうございます！
そうなんですね。`computed`から非同期処理はできないことは知りませんでした。
おかげさまでスッキリしました。
‘computedTest()‘は`methods`内に入れ、外から直接それを使うようにします。
どうもありがとうございました。