VueJS2 and Vuex deep nested state object mutation — claims state variable is undefined

Question

I have been trying to update state.describeFields.user and getting a Error in render: TypeError: Cannot read property 'user' of undefined"

The section of code the error is dying on is: state.describeFields[payload.obj] = payload.data; where payload.obj is either 'user' or 'account'

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.

The Daisy chain begins with this.$store.dispatch('setCurrentIntegration', { data: {stuff:'here'}})

What should happen is this:

1. update state.integration (works)

2. get new items from indexeddb( retrieveLocalDescribeFields ) for each of the state.objects values and save them to state.describeFields by property key (ironically actually saves them to state, but then errors)

3. if no data arrives from retrieveLocalDescribeFields then go out to remote api to gather data (code never gets here but does work before I moved all of this to vuex)

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.

export default {
  state: {
    integration: {},
    objects: ["user", "account"],
    describeFields: { user: [], account: [] }
  },
  getters: {
    getCurrentIntegration(state) {
      return state.integration;
    },
    getCurrentDescribeFields: state => obj => {
      return state.describeFields.hasOwnProperty(obj)
        ? state.describeFields[obj]
        : [];
    }
  },
  actions: {
    setCurrentIntegration({ commit, dispatch, state }, payload) {
      return new Promise(resolve => {
        commit("updateCurrentIntegration", payload);
        let promises = [];
        state.objects.forEach(obj => {
          promises.push(dispatch("retrieveLocalDescribeFields", { obj: obj }));
        });
        resolve(Promise.all(promises));
      });
    },
    setCurrentDescribeFields({ commit }, payload) {
      return new Promise(resolve => {
        commit("updateCurrentDescribeFields", payload);
        resolve(true);
      });
    },
    setClearDescribeFields({ commit }) {
      return new Promise(resolve => {
        commit("updateClearDescribeFields");
        resolve(true);
      });
    },
    retrieveLocalDescribeFields({ commit, dispatch, state, getters }, payload) {
      return new Promise(resolve => {
          // 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 => {
          // 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;
    }
  }
};

Answer 1

OK. -hangs head in shame-

The problem was with a sibling component that changed as a result of the setCurrentDescribedFields (a pagination component).

It was that piece that was erring. The trace just happened to trace back to the store mutations. gah!

Thanks for the quick help. Appreciate it!