title: Initializing VueX Store Not Working
body: <p>I recently switched from redux to VueX, and can't seem to get my initial state to update. I call an API from the backend in the created() hook of my main App component that returns data that initializes the state. I can see the network request along with the data, so I know that the action is being called, but it seems like either the mutation isn't being called or my mutation isn't working properly. I've tried debugging in the browser but for some reason chrome doesn't let me see any data when I add breakpoints. I have the Vue devtools extension installed and can't see anything other than the base state.</p>
  
  <p>It's probably good to note that I'm using modules, and that the action I'm calling is tied to the top level/root level module. Here are the files that I think are relevant:</p>
  
  <p><strong>Main store</strong></p>
  
  <pre><code>/* eslint-disable no-underscore-dangle */
  import Vue from 'vue';
  import Vuex from 'vuex';
  import nandus from './nandus';
  
  Vue.use(Vuex);
  
  const store = new Vuex.Store({
    modules: {
      nandus,
    },
    strict: process.env.NODE_ENV !== 'production',
  });
  
  export default store;
  </code></pre>
  
  <p><strong>Nandus module</strong></p>
  
  <pre><code>import axios from 'axios';
  import { FETCH_NANDU_DATA, ASYNC_FETCH_NANDU_DATA } from '@/constants/nandus';
  import modal from './modal';
  import pdf from './pdf';
  import scores from './scores';
  import sections from './sections';
  
  
  export default {
    state: {
      wushuStyles: null,
      nanduFormTypes: null,
      movements: null,
      movementCodes: null,
      nandu: null,
      connections: null,
    },
    actions: {
      [ASYNC_FETCH_NANDU_DATA]: ({ commit }) =&gt; {
        function success(response) {
          commit(FETCH_NANDU_DATA, response.data);
        }
  
        function failure(error) {
          const message = error.response ? error.response.data.message : error.message;
          console.error(`XHR Failed for getNanduData: ${message}`);
        }
  
        return axios.get('/api/nandu')
          .then(success)
          .catch(failure);
      },
    },
    mutations: {
      [FETCH_NANDU_DATA]: (state, data) =&gt; ({ ...state, ...data }),
    },
    modules: {
      modal,
      pdf,
      scores,
      sections,
    },
  };
  </code></pre>
  
  <p><strong>App.vue</strong></p>
  
  <pre><code>import { mapActions } from 'vuex';
  import store from '@/store';
  import { ASYNC_FETCH_NANDU_DATA } from '@/constants/nandus';
  
  export default {
    name: 'app',
    computed: {
      ...mapActions([
        ASYNC_FETCH_NANDU_DATA,
      ]),
    },
    created() {
      store.dispatch(ASYNC_FETCH_NANDU_DATA);
    },
  };
  </code></pre>
  
  <p><strong>Example data returned from API</strong></p>
  
  <pre><code>{
    wushuStyles: ['A', 'B'],
    nanduFormTypes: ['A', 'B'],
    movements: ['A', 'B'],
    movementCodes: ['A', 'B'],
    nandu: ['A', 'B'],
    connections: ['A', 'B'],
  }
  </code></pre>