Мутация объекта с глубоким вложением VueJS2 и Vuex — утверждает, что переменная состояния не определена

#javascript #vue.js #vuejs2 #vuex

#javascript #vue.js #vuejs2 #vuex

Вопрос:

Я пытался обновить, state.describeFields.user и получаю ошибку при рендеринге: TypeError: не удается прочитать свойство ‘user’ неопределенного «

Раздел кода, в котором ошибка исчезает, таков:, state.describeFields[payload.obj] = payload.data; где payload.obj либо ‘user’, либо ‘account’

Это небольшая последовательная цепочка вызовов, которая, как я предполагаю, вызывает проблему, но я недостаточно сильный разработчик, чтобы понять все последствия. Как добраться… Спасибо вам, ребята.

Последовательная цепочка начинается с этого.$store.dispatch(‘setCurrentIntegration’, { data: {stuff:’here’}})

Что должно произойти, так это:

  1. обновить состояние.интеграция (работает)

  2. получите новые элементы из indexeddb ( retrieveLocalDescribeFields ) для каждого из state.objects значений и сохраните их в state.describeFields по ключу свойства (по иронии судьбы, фактически сохраняет их в state, но затем выдает ошибки)

  3. если данные не поступают из retrieveLocalDescribeFields , перейдите к удаленному api для сбора данных (код никогда не попадает сюда, но работает до того, как я переместил все это в vuex)

Я попытался сгруппировать обещания, решая более конкретно, я попробовал консоль.состояние входа в систему.Опишите поля и полезную нагрузку.данные в функции с ошибкой, оба выводят данные на консоль, что было бы ожидаемо.

 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;
    }
  }
};
  

Комментарии:

1. Все выглядит правильно. Вы абсолютно уверены, что в вашей updateCurrentDescribeFields мутации нет опечаток?

2. Работает просто отлично в этом JSFiddle .

3. Я буквально скопировал и вставил код, никаких изменений (кроме удаления обещаний axios и dexis… это наихудшая проблема … та, которая ДОЛЖНА сработать …. лол

4. Возможно, вы используете старую сборку или что-то в этом роде (кэш браузера и т.д.). Убедитесь, что все сохранено и вы запускаете чистую новую сборку

Ответ №1:

ОК. -hangs head in shame-

Проблема была с родственным компонентом, который изменился в результате setCurrentDescribedFields (компонент разбивки на страницы).

Ошибка была в этом фрагменте. Просто так получилось, что трассировка вернулась к мутациям хранилища. боже!

Спасибо за быструю помощь. Ценю это!