title: VueJS2 and Vuex deep nested state object mutation -- claims state variable is undefined
body: <p>I have been trying to update <code>state.describeFields.user</code> and getting a <em>Error in render: TypeError: Cannot read property 'user' of undefined"</em></p>
  
  <p>The section of code the error is dying on is:
  <code>state.describeFields[payload.obj] = payload.data;</code>
  where <code>payload.obj</code> is either 'user' or 'account'</p>
  
  <p>It's a bit of daisy chain of calls, which I assume is causing the problem, but I am not strong enough of a developer to understand all of the implications. Getting there...  Thanks to you guys.</p>
  
  <p>The Daisy chain begins with this.$store.dispatch('setCurrentIntegration', { data: {stuff:'here'}})</p>
  
  <p>What should happen is this:</p>
  
  <ol>
  <li><p>update state.integration (works)</p></li>
  <li><p>get new items from indexeddb(<code>retrieveLocalDescribeFields</code>) for each of the <code>state.objects</code> values and save them to state.describeFields by property key (ironically actually saves them to state, but then errors)</p></li>
  <li><p>if no data arrives from <code>retrieveLocalDescribeFields</code> then go out to remote api to gather data (code never gets here but does work before I moved all of this to vuex)</p></li>
  </ol>
  
  <p>I've tried grouping the promises, resolving more specifically, I've tried console.log on state.describeFields and payload.data in the function that is erring, both output data to console that would be expected.</p>
  
  <pre><code>export default {
    state: {
      integration: {},
      objects: ["user", "account"],
      describeFields: { user: [], account: [] }
    },
    getters: {
      getCurrentIntegration(state) {
        return state.integration;
      },
      getCurrentDescribeFields: state =&gt; obj =&gt; {
        return state.describeFields.hasOwnProperty(obj)
          ? state.describeFields[obj]
          : [];
      }
    },
    actions: {
      setCurrentIntegration({ commit, dispatch, state }, payload) {
        return new Promise(resolve =&gt; {
          commit("updateCurrentIntegration", payload);
          let promises = [];
          state.objects.forEach(obj =&gt; {
            promises.push(dispatch("retrieveLocalDescribeFields", { obj: obj }));
          });
          resolve(Promise.all(promises));
        });
      },
      setCurrentDescribeFields({ commit }, payload) {
        return new Promise(resolve =&gt; {
          commit("updateCurrentDescribeFields", payload);
          resolve(true);
        });
      },
      setClearDescribeFields({ commit }) {
        return new Promise(resolve =&gt; {
          commit("updateClearDescribeFields");
          resolve(true);
        });
      },
      retrieveLocalDescribeFields({ commit, dispatch, state, getters }, payload) {
        return new Promise(resolve =&gt; {
            // go get data from indexeddb...
            // dexis call omitted
  
          if (theFields.length) {
            resolve(
              commit("updateCurrentDescribeFields", {
                obj: payload.obj,
                data: theFields
              })
            );
          } else {
            resolve(dispatch("retrieveRemoteDescribeFields", payload));
          }
        });
      },
      retrieveRemoteDescribeFields({ commit, state, getters }, payload) {
        return new Promise(resolve =&gt; {
            // go get data from remote api...
            // axios call omitted
  
          commit("updateCurrentDescribeFields", {
            obj: payload.obj,
            data: res.data.records
          });
          resolve(true);
        });
      }
    },
    mutations: {
      updateClearDescribeFields(state) {
        state.describeFields = { user: [], account: [] };
      },
      updateCurrentIntegration(state, payload) {
        state.integration = payload.data;
      },
      updateCurrentDescribeFields(state, payload) {
        state.describeFields[payload.obj] = payload.data;
      }
    }
  };
  </code></pre>