Почему могут возникать ошибки при добавлении данных в объект стора?

Question

[Viktimius]

Добрый день, подскажите почему при добавлении элементов в объект стора и последующее обновление компонента может вызывать проблемы с рендерингом элементов ? Данные в компонент заходят через computed property, для обновления массива использую vue.set. Подскажите в чем могут быть проблемы или куда капать ?

код мутации, обновляющей объект стора

updateMessagesByPage(state, payload) {
    let messages = [ ...state.messages[state.dialog.id], ...payload.messages ];
    Vue.set(state.messages, state.dialog.id, messages);
    Vue.set(state.messagesPagination, state.dialog.id, payload.next);
  },

код computed переменной

messages: {
      get: function() {
        return this.getCurrentDialogMessages(); // геттер из стора
      },
      set: function(newMessages) {
        return newMessages;
      }
    },

функция скролла

debounceScroll: _.debounce(function () {
      const self = this;
      const container = document.querySelector('.chat-container');
      let page = this.$store.state.Messenger.messagesPagination[this.id];
      let scrollTop = -container.scrollTop;
      let topOfWindow = scrollTop + container.offsetHeight >= container.scrollHeight * 0.8;

      if (topOfWindow) {
        this.fetchMessagesByPage(); // запрос на добавление "следующих обновлений"
      }
    }, 2000)

экшен запрашивающий

async fetchMessagesByPage({ commit, state }) {
    const res = await fetch(state.messagesPagination[state.dialog.id]); // тут строка запроса на следующие 20 сообщений
    const messages = await res.json();

    commit('updateMessagesByPage', {messages: messages.results, next: messages.next, previous: messages.previous, dialog_id: state.dialog.id});
  },

Проблемы

Comments

[WapSter]

А где ты обращаешься к мутации?

[Viktimius]

WapSter, добавил под отдельные спойлеры функцию скролла и экшен, который дергает мутацию.