title: set data only on first load with nuxt.js
body: <p>I'm new to nuxt.js so I'm wondering what could be the best way to set up some data via REST api.</p>
  <p>I have a store folder like this:</p>
  <pre><code>store
      -posts.js
      -categories.js
      -index.js
  </code></pre>
  <p>I've tried to set the data with <code>nuxtServerInit</code> actions in the <code>index.js</code>:</p>
  <pre><code>export const actions = {
      async nuxtServerInit({ dispatch }) {
          await dispatch('categories/setCategories')
          await dispatch('posts/loadPosts','all')
         
          
        }
  }
  </code></pre>
  <p>But doesn't works: actions are dispatched (on the server) but data are not set.</p>
  <p>So I've tried with <a href="https://nuxtjs.org/api/pages-fetch/" rel="nofollow noreferrer">fetch</a> but this method is called every time the page where I have to display posts is loaded. Even if, in the general layout, I do this:</p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;Header /&gt;
      &lt;keep-alive&gt;
        &lt;nuxt/&gt;
      &lt;/keep-alive&gt;
      
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <p>So my solution, for now, is to use fetch in this way,
  In the page component:</p>
  <pre><code> async fetch({store}){
         if(store.getters['posts/getPosts'].length === 0 &amp;&amp; store.getters['categories/getCategories'].length === 0 ){
              await store.dispatch('categories/setCategories')
              await store.dispatch('posts/loadPosts','all')
         } 
     }
  </code></pre>
  <p>Also, one thing I noted is that fetch seems not working on the root page component (pages/index.vue)</p>
  <p>My solution seems works, but there is maybe another better way to set the data?</p>