はじめに

とりあえず力技で実装しました。
※もっと良い書き方があれば教えてください！

やりたいこと

templateを読み込むとき、axiosで値Aを取得
取得したAを画面に表示（つまりAの取得は下記のボタンを押す前から開始していたい）
button @clickで発火したとき、Aをstoreに保管

問題

@click発火時、Aを取得しているとは限らない

参考コード

vue

<template>
<div>
  <p>{{ a }}</p>
  <button @click="storeAction">登録</button>  
</div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      a: ""
    }
  },
  created() {
    axios(param).then(el => {//param: header,urlなどの情報モジュール
      this.a = el
    })
  },
  methods: {
    storeAction() {
      this.$store.dispatch('module/set', this.a)//aをstore.stateにセットする
    }
  },
}
</script>

解決方針

axiosが完了するまでdispatchを待たせる
setIntervalを利用し、値がAに入っているか、定期的に確認する。

参考コード

vue

    storeAction() {
      //（略）「読み込み中」のモーダルを表示する処理
      const id = setInterval(() => {
        if(!isEmpty(a)) {//aが空ではない場合
          this.$store.dispatch('module/set', this.a)//aをstore.stateにセットする
          // (略)モーダル解除処理
          clearInterval(id)
        }
      }, 500);
    }

課題

値を取得するまで繰り返し処理させるの・・・カッコ悪い・・・
他で並列処理させているものが完了したことを良い感じに教えてくれるものがないか色々ググってみたんだけど、良い方法が見つからなくてこんな力技になりました。
もっと良い書き方、そもそもやりたいことがメソッドで提供されている場合は教えてくださると嬉しいです。