В настоящее время я работаю над сеткой больших данных, используя Handsontable и Vue, и мои данные хранятся в Vuex. Проблема в том, что когда я редактирую ячейку, я получаю ошибки мутации Vuex. В ag-grid я могу использовать valueSetters и getters, чтобы этого избежать, но я не могу найти, как это сделать в Handsontable. Кроме того, события afterChange не запускаются из-за ошибок мутации. Получение и установка вычисленных значений также мне не помогают. У кого-нибудь была такая же проблема? Я, вероятно, смогу написать собственный редактор, но это последнее, что я хочу делать, поэтому, возможно, есть другое решение.

Спасибо.

1
user2204319 14 Сен 2018 в 13:20

2 ответа

Лучший ответ

Вариант 1 : убедитесь, что вы указали копию данных из хранилища vuex в свойство settings.data Handsontable. Таким образом, vuex не будет жаловаться, когда Handsontable изменяет данные, но вам нужно будет убедиться, что все изменения зафиксированы в магазине.

Примере:

  get settings() {
    return {
      data: JSON.parse(JSON.stringify(this.data)),
    };
  }

Вариант 2 : добавьте обработчик beforeChange. который фиксирует изменение в хранилище, а затем возвращает false. Это делает все изменения игнорируемыми Handsontable. Это гарантирует, что Handsontable всегда отображает то, что передано в магазин vuex. Предостережение: это также означает, что Handsontable будет показывать старое значение сразу после редактирования ячейки, пока оно не будет сохранено в хранилище.

Примере:

  public beforeChange(changes, source) {
    if (source === "edit") {
      changes
        .map((change, i) => {
          const [index, attribute, oldValue, newValue] = change;
          const oldRow = this.settings.data[index];
          this.$store.dispatch("rowChange", { data: oldRow, index, attribute, oldValue, newValue });
        });
      // disregard all changes until they are propagated via vuex state commits
      return false;
    }
  }

(Если вы поделитесь какими-то конкретными примерами кода, вам будет проще подробно помочь)

2
Motin 19 Сен 2018 в 18:48

Не изменяйте данные напрямую, это антипаттерн, и, скорее всего, вы получите ошибки, если вас поймают на этом.

Попробуйте записать мутации в Vuex и зафиксировать эти мутации с данными полезной нагрузки, которые вы хотите обновить. Напишите всю логику обновления состояния внутри мутаций.

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

Я надеюсь, что это помогает.

0
The Observer Man 14 Сен 2018 в 10:29