APIリクエストしたい

Question

質問

APIリクエストしたいです。
自分なりに試した所、以下の通り2点の問題が発生しました。
これらの問題が発生しないようにするには、どのようにAPIリクエストやデータ管理をするのが適切なのでしょうか。

ファイル構成

問題点1（試したこと1）

この方法は/api/serversに2回リクエストしてしまう問題があります。

• App.js

const app = new Vue({
  router,
  components: { App },
  data () {
    return {
      servers: []
    }
  },
  template: '<App/>',
  async mounted() {
    // serversが空ならAPIリクエストして初期化する
    if (this.servers.length === 0) {
      await this.getServers()
    }
  },
  methods: {
    getServers: async function () {
      let response = await fetch('/api/servers')
      let json = await response.json()
      this.servers = json
    }
  }
})

app.$mount('#app')

• Index.vue

export default {
  data () {
    return {
      selectedServerId: null
    }
  },
  async mounted () {
    // serversが空ならAPIリクエストして初期化する
    if (this.$root.servers.length === 0) {
      await this.$root.getServers()
    }

    // serversの最初の要素をデフォルト値とする
    this.selectedServerId = this.$root.servers[0].id
  }
}

問題点2（試したこと2）

この方法は/api/serversにリクエストする前にIndex.vueのmounted()処理が実行されてしまう為、エラーが発生しています。

• App.js

省略。「試したこと1」と変化なし。

• Index.vue

export default {
  data () {
    return {
      selectedServerId: null
    }
  },
  async mounted () {
    // serversが空ならAPIリクエストして初期化する
    // if (this.$root.servers.length === 0) {
    //   await this.$root.getServers()
    // }

    // serversの最初の要素をデフォルト値とする
    this.selectedServerId = this.$root.servers[0].id
  }
}

環境

Vue.js 2.5.7

Answer 1

Index.vueのみでawait this.$root.getServers()を実行した所問題なくなりました。
App.vueのcratedやmountedでthis.serversの値を利用した処理をすると恐らく問題が発生します。
（this.serversが読み込まれる前に処理をする為。）
しかし、現在の私のプロジェクトでは問題ないので一度クローズとさせて頂きます。

• App.vue

const app = new Vue({
  router,
  components: { App },
  data () {
    return {
      servers: []
    }
  },
  template: '<App/>',
  async mounted() {
    // serversが空ならAPIリクエストして初期化する
    // if (this.servers.length === 0) {
    //   await this.getServers()
    // }
  },
  methods: {
    getServers: async function () {
      let response = await fetch('/api/servers')
      let json = await response.json()
      this.servers = json
    }
  }
})

app.$mount('#app')

• Index.vue

export default {
  data () {
    return {
      selectedServerId: null
    }
  },
  async mounted () {
    // serversが空ならAPIリクエストして初期化する
    if (this.$root.servers.length === 0) {
      await this.$root.getServers()
    }

    // serversの最初の要素をデフォルト値とする
    this.selectedServerId = this.$root.servers[0].id
  }
}