title: Pre-fetch api data in Vuex with Nuxt.js
body: <p>I am trying to pre-fetch some data and update Vuex before client-side kicks in.</p>
  
  <p><code>store/index.js</code></p>
  
  <pre><code>export const state = () =&gt; ({});
  export const getters = {};
  export const actions = {
    async nuxtServerInit ({ dispatch }) {
      await dispatch('nasa/getImages');
    }
  };
  </code></pre>
  
  <p><code>store/moduleName.js</code></p>
  
  <pre><code>import fetch from 'node-fetch';
  
  export const state = () =&gt; ({
    images: []
  });
  
  export const mutations = {
    storeImages(state, data) {
      state.images = [];
      state.images.push(...data);
      console.log(state.images[0]); &lt;- this logs in the terminal
    }
  }
  
  export const actions = {
    getImages(store) {
      return fetch('api/url').then(response =&gt; {
        response.json().then(function(data) {
            store.commit('storeImages', data.collection.items.slice(0, 24));
        });
      });
    }
  }
  </code></pre>
  
  <p>My mutation gets triggered by <strong>nuxtServerInit</strong> and I am getting the first element logged in the terminal on page load. My store in the client-side however, is empty.</p>
  
  <p>What am I missing?</p>