title: Best place to fetch data for authed users in Vue app?
body: <p>Hi I'm fetching a arrays of posts from my express API in the Home.vue which is protected by route guards.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;script&gt;
  export default {
    created() {
      this.$store.dispatch('fetchPosts')
    }
  }
  &lt;/script&gt;
  </code></pre>
  <p>fetchPosts action:</p>
  <pre class="lang-js prettyprint-override"><code>async fetchPosts(context) {
    try {
      const res = await api.get('/posts', {
        headers: {
          Authorization: `Bearer ${localStorage.getItem('token')}`
        }
      })
      context.commit('SET_POSTS', res.data)
      context.commit('SET_ERROR', null)
    } catch(err) {
      console.log(err.response.data)
      context.commit('SET_ERROR', err.response.data)
    }
  }
  </code></pre>
  <p>In my action I commit a mutation which sets the posts object to res.data. I only want to fetchPosts when user logs in since I have a mutation which adds the post to the db and updates the posts state, when user adds a post. But because I route back to the home screen this causes the created() hook to run again, re-fetching data on each post req. App of course work fine but could be more efficient. What can I do to resolve better enhance my app?</p>