# 実現したいこと以下の処理で``axios``のレスポンスの値を取得できるようにしたい困っていること - ``axios``のデータを``datas``に代入したが``axios``のレスポンスのデータを取得できずに困っています - ``axios``のデータを``vuex``に入れているのに直後の``console.log``を覗いてみると、空になっていた ```js async created() { const datas = axios.get("https://jsonplaceholder.typicode.com/posts") .then((response) => {return response.data}); console.log(datas); axios.get("https://jsonplaceholder.typicode.com/posts") .then((response) => this.$store.commit("posts", res.data)); console.log(this.$store.state.posts); //リロードすると中身が空だった } ``` ``dates``の``console.log``の中身 ```text Promise { } __proto__: Promise [[PromiseState]]: "fulfilled" [[PromiseResult]]: Object ```

> axiosのデータをvuexに入れているのに直後のconsole.logを覗いてみると、空になっていた非同期処理の完了を待たずに`console.log`しているためかと思われます。非同期処理の後に実行したい処理は`.then()`の中に書くようにすればうまくいくはずです。 ```javascript axios.get("https://jsonplaceholder.typicode.com/posts") .then(response => { this.$store.commit("posts", response.data); console.log(this.$store.state.posts); // ここに書く！ }) ``` あるいは`await`を用いるとよりスッキリと書けます。 ```javascript // awaitがあるので非同期処理が終わるまで次の処理に進まない const response = await axios.get("https://jsonplaceholder.typicode.com/posts"); this.$store.commit("posts", response.data); console.log(this.$store.state.posts); ```

実現したいこと

以下の処理でaxiosのレスポンスの値を取得できるようにしたい

困っていること

axiosのデータをdatasに代入したがaxiosのレスポンスのデータを取得できずに困っています
axiosのデータをvuexに入れているのに直後のconsole.logを覗いてみると、空になっていた

js
1  async created() {
2　　 const datas = axios.get("https://jsonplaceholder.typicode.com/posts")
3      .then((response) => {return response.data});
4    console.log(datas);
5　　 axios.get("https://jsonplaceholder.typicode.com/posts")
6      .then((response) => this.$store.commit("posts", res.data));
7　　 console.log(this.$store.state.posts); //リロードすると中身が空だった
8  }

datesのconsole.logの中身

text
1Promise {<pending>}
2__proto__: Promise
3[[PromiseState]]: "fulfilled"
4[[PromiseResult]]: Object

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

回答1件

axiosのデータをvuexに入れているのに直後のconsole.logを覗いてみると、空になっていた

非同期処理の完了を待たずにconsole.logしているためかと思われます。
非同期処理の後に実行したい処理は.then()の中に書くようにすればうまくいくはずです。

javascript
1axios.get("https://jsonplaceholder.typicode.com/posts")
2  .then(response => {
3    this.$store.commit("posts", response.data);
4    console.log(this.$store.state.posts); // ここに書く！
5  })

あるいはawaitを用いるとよりスッキリと書けます。

javascript
1// awaitがあるので非同期処理が終わるまで次の処理に進まない
2const response = await axios.get("https://jsonplaceholder.typicode.com/posts"); 
3this.$store.commit("posts", response.data);
4console.log(this.$store.state.posts);