【Vue.js, axios】createdで取得したデータをmountedで出力

いつも大変お世話になっております。

Vue.jsについて初歩的な質問になります。
Vue.jsではライフサイクルがあり、created→mountedの順に処理が実行されます。

そこで、試しに以下のソースコードでcreatedで取得したapiを
mountedでコンソール上に出力しようとしたのですが何も表示されません。

これは一体何が起こっているのでしょうか？

ソースコード

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta http-equiv="X-UA-Compatible" content="IE=edge">
5  <meta charset="utf-8">
6  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
7</head>
8<style>
9    [v-cloak]{
10        display : none;
11    }
12</style>
13<body>
14<div id="app" v-cloak>
15</div>
16<script src="https://jp.vuejs.org/js/vue.js"></script>
17<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
18<script>
19
20
21	const app = new Vue({
22
23		data(){
24			return {
25
26				info : ""
27
28			}
29		},
30
31		async created(){
32
33			await axios
34				.get('https://api.coindesk.com/v1/bpi/currentprice.json')
35				.then(res => {
36					this.info = res
37				})
38		},
39
40		mounted(){
41			console.log(this.info);
42		}
43
44	}).$mount("#app");
45
46</script>
47</body>
48</html>

簡単な質問かと思いますが、どうぞ宜しくお願い致します。

surface_0

2021/11/18 09:18

こちらの質問はまだ未解決でしょうか？問題解消されましたら解決にするようお願いします。

matsuo_basho

2021/11/20 15:04

すみません。失念しておりました、、！詳細にご説明いただきありがとうございます！！

行動規範の内容に同意します

回答1件

ベストアンサー

意外と簡単な質問じゃないようです…
Vueのライフサイクルは非同期らしく、awaitしたところでcreatedの完了を待たずにmountedが実行されてしまうようです。
実際にデバッガで、代入個所とダンプ箇所の実行順序を確認すると想定と逆転してるのが確認できると思います。
これについては熱い議論があったようです。

Await async component lifecycle hooks · Issue #7209 · vuejs/vue

全部読んだわけではないですが、解決策としてはこのIssueの最後で提示されているデコレータを使うか
下記のように非同期処理を待機するための変数を用意する必要があるようです。

js
1    const app = new Vue({
2        data(){
3          return {
4            info: "",
5            infoPromise: null, // axios待機用（ここに持つのもおかしい気はするけど）
6          }
7        },
8
9        created(){
10          this.infoPromise = axios.get('https://api.coindesk.com/v1/bpi/currentprice.json');
11        },
12
13        async mounted(){
14          this.info = await this.infoPromise;
15          console.log(this.info);
16        }
17    }).$mount("#app");