VueJS2 和 Vuex 深度嵌套状态对象突变——声称状态变量未定义答案

【问题标题】：VueJS2 and Vuex deep nested state object mutation -- claims state variable is undefinedVueJS2 和 Vuex 深度嵌套状态对象突变——声称状态变量未定义
【发布时间】：2019-08-25 13:31:48
【问题描述】：

我一直在尝试更新 state.describeFields.user 并得到一个 渲染错误：TypeError: Cannot read property 'user' of undefined"

错误正在消失的代码部分是： state.describeFields[payload.obj] = payload.data; 其中payload.obj 是“用户”或“帐户”

这是一个有点菊花链的调用，我认为这是导致问题的原因，但我不足以让开发人员理解所有含义。到达那里...谢谢你们。

菊花链以 this.$store.dispatch('setCurrentIntegration', { data: {stuff:'here'}}) 开始

应该是这样的：

更新 state.integration（工作）
从 indexeddb(retrieveLocalDescribeFields) 中为每个 state.objects 值获取新项目，并通过属性键将它们保存到 state.describeFields（具有讽刺意味的是，实际上将它们保存到状态，但随后出错）
如果没有来自retrieveLocalDescribeFields 的数据，则使用远程 api 收集数据（代码永远不会到达这里，但在我将所有这些都移到 vuex 之前确实可以工作）

我已经尝试对承诺进行分组，更具体地解决问题，我已经在 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;
    }
  }
};

【问题讨论】：

一切看起来都正确。您确定您的 updateCurrentDescribeFields 突变中没有任何拼写错误吗？
在this JSFiddle 中工作得很好。
我从字面上复制并粘贴了代码，没有任何更改（除了删除 axios 和 dexis 承诺......这是最糟糕的问题......应该工作的那种......大声笑
可能是您正在运行的旧版本或类似的东西（浏览器缓存等）。确保所有内容都已保存，并且您正在运行一个干净的新版本

标签： javascript vue.js vuejs2 vuex

【解决方案1】：

好的。 -hangs head in shame-

问题在于同级组件因 setCurrentDescribedFields（分页组件）而发生更改。

正是那篇文章出错了。跟踪恰好追溯到存储突变。嘎嘎！

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

【讨论】：