VueJS2和Vuex深層嵌套狀態對象變異-聲明狀態變量未定義

Question

我一直在嘗試更新state.describeFields.user並在渲染中遇到錯誤：TypeError：無法讀取未定義的屬性“ user””

該錯誤所依賴的代碼段是： state.describeFields[payload.obj] = payload.data; 其中payload.obj是“用戶”或“帳戶”

我想這是問題的根源，但是我對開發人員的了解不足，無法理解所有含義。 到達那里...謝謝你們。

雛菊鏈從this。$ store.dispatch（'setCurrentIntegration'，{data：{stuff：'here'}}）開始

這應該發生的是：

1. 更新state.integration（有效）

2. 從indexeddb（ retrieveLocalDescribeFields ）中獲取每個state.objects值的新項目，然后通過屬性鍵將它們保存到state.describeFields（諷刺的是，實際上將它們保存到state，但隨后出現錯誤）

3. 如果沒有數據從retrieveLocalDescribeFields到達，則出去到遠程api收集數據（代碼永遠不會到達這里，但是在我將所有這些都移到vuex之前可以正常工作）

我已經嘗試將promise進行分組，更具體地說，我已經嘗試在錯誤的函數中對state.describeFields和payload.data進行console.log的輸出，這兩個結果均會輸出到控制台。

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

好。 -hangs head in shame-

問題出在同級組件由於setCurrentDescribedFields（分頁組件）而發生了變化。

那是那件犯錯的東西。 跟蹤恰好可以追溯到商店突變。 ah！

感謝您的快速幫助。 贊賞！