title: Vuex rendering data that is fetched from REST API
body: <p>For such component</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div&gt;
      &lt;router-link :to=&quot;{name:'section', params: { sectionId: firstSectionId }}&quot;&gt;Start&lt;/router-link&gt;
    &lt;/div&gt;
  &lt;/template&gt;
      
  &lt;script lang=&quot;ts&quot;&gt;
    import { mapActions } from &quot;vuex&quot;
      
    export default {
      mounted() {
        this.getSectionId()
      },
      computed: {
        firstSectionId() {
          return this.$store.state.firstSectionId
        }
      },
      methods: mapActions([&quot;getSectionId&quot;])
    }
  &lt;/script&gt;
  </code></pre>
  <p>Store:</p>
  <pre class="lang-js prettyprint-override"><code>const store: any = new Vuex.Store({
      state: {
          firstSectionId: null
      },
      // actions,
      // mutations
  })
  </code></pre>
  <p>I have a web request in the <code>getSectionId</code> action and it asynchronously fetches data and calls a mutation that will fill <code>firstSectionId</code> in <code>state</code>. During the initial rendering <code>firstSectionId</code> is <code>null</code> and I get the warning that a required parameter is missing during rendering of <code>router-link</code>.</p>
  <p>It is not a problem here to add <code>v-if=&quot;firstSectionId&quot;</code>. But in general what is the approach for fetching data from a server to be displayed? Currently all my components are checking if there is data present in the store before rendering, is it normal or is there a better way to wait for data to be loaded before rendering it?</p>