title: Vuex API call if page need it
body: <p>i have a VueJS project and i need to load data when page need it. Like, profile page needs user's informations, appointments page needs user's appointments data etc.</p>
  <p><strong>My solution so far:</strong></p>
  <p>I am checking data in every component's beforeRouteEnter function. If data null then i load the data from vuex action. This is the worst solution for this problem because code always repeating itself.</p>
  <p>Profile.Vue:</p>
  <pre><code>beforeRouteEnter: async (to, from, next) =&gt; {
      if(!store.state.provinces)
          await store.dispatch(&quot;getProvinces&quot;)
      next()
  },
  </code></pre>
  <p>Appointments.vue</p>
  <pre><code>beforeRouteEnter: async (to, from, next) =&gt; {
      if(!store.state.provinces)
          await store.dispatch(&quot;getProvinces&quot;)
      next()
  },
  </code></pre>
  <p><strong>My second strategy:</strong>
  I thought if i use getters instead of states maybe it will be work but when i use getters, now data loads after route.</p>