Question

我一直在尝试更新state.describeFields.user并在渲染中出现错误：TypeError：无法读取未定义属性'user'“

错误所依赖的代码段是： state.describeFields[payload.obj] = payload.data; 其中payload.obj是“用户”或“帐户”

这有点儿菊花链式调用，我认为这是造成问题的原因，但是我对开发人员的了解不足，无法理解所有含义。到达那里...谢谢你们。

雏菊链从此开始。$ store.dispatch（'setCurrentIntegration'，{数据：{stuff：'here'}}）

这应该发生什么：

更新状态集成（有效）
从indexeddb（retrieveLocalDescribeFields）中为每个state.objects值获取新项，然后将它们保存到state.describeFields（使用属性键）（讽刺的是，实际上将它们保存到state，但随后出错）
如果没有数据从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（分页组件）而发生了变化。

那是犯错的那一块。跟踪恰好可以追溯到商店突变。加！

感谢您的快速帮助。赞赏！

VueJS2和Vuex深层嵌套状态对象变异-声明状态变量未定义

1 个答案: