Vue.jsでのコンポーネント間データやり取りについて

Question

Vue.js初学者です。

APIへのリクエストを行うコンポーネントとAPIから返ってきた値を表示するコンポーネントを

作成しています。

ソースコードとしては下記のような形です。

• APIリクエストコンポーネントのスクリプト

<script>
import axios from 'axios'

export default {
  name: 'ApiRequest',
  methods: {
    getBlog: function () {
      axios.get(
        "endpoint",
        {
          headers: {
            "X-API-KEY": "key"
          },
          data: {}
        }
      ).then (response => {
        return response.data
      })
    },
  }
}
</script>

• 値を表示するコンポーネントのスクリプト

import ApiRequest from '@/components/ApiRequest.vue'

export default {
  name: 'view',
  data () : {
    return {
      title: '',
    }
  },
  mounted () {
    this.setValue(ApiRequest.methods.getBlog())
  },
  methods: {
    setValue: function (data) {
      this.title = data.title
    }
  }
}

上記のようなイメージで組めばデータが取れると思ったのですが、実際には取れませんでした。

どのようにすればAPIからの返却値を呼び出し(表示用)コンポーネント側で取得

できるでしょうか。

「そもそも値が取れているのか？」については、表示側のコンポーネントにAPIリクエスト

コンポーネントの処理を組み込み、確認したところデータは来ているので、APIから取得できて

いないということはないと思います。

親子関係であれば、propsやthis.$emitでデータのやりとりができるとのことでしたので、

こちらも試してみましたが、思った通りには動きませんでした。(この辺りは理解不足もあります

できれば今回はvuexを使用せずに組みたいと思っているので、vuexによる状態保存は使用

しないつもりです。

Answer 1

構成が間違っている可能性もあるので、一旦考え直す。

Answer 2

getBlogの戻り値はnullです。（戻り値を返していない）

Comments

[mikkame]

vue/vuex、props、$emitなどは今の所関係ありません。

[退会済みユーザー]

`.then~`の中で`return`しても返らないってことでしょうか。
`axios.get()`の中で`return`するか下記のように最後で返すようにすればいいんですかね・・・
```
getBlog: function () {
処理

return response.data
}
```

> vue/vuex、props、$emitなどは今の所関係ありません。
これに関しては現状関係ないですね。

[mikkame]

> `.then~`の中で`return`しても返らないってことでしょうか。

これについては、thenに設定したコールバックの返り値を返しているにすぎません。
return を囲っている一番最寄りのfunctionは何かを考えてみましょう。

> `axios.get()`の中で`return`するか下記のように最後で返すようにすればいいんですかね・・・

違います。その時にはresponseという変数は存在しません。

Vueの前にまずは、JavaScript、特に非同期処理やコールバックについて勉強することをお勧めします

[退会済みユーザー]

ありがとうございます。