Question

我目前正在使用Handsontable和Vue在大数据网格上工作，我的数据存储在Vuex中。问题是，当我编辑单元格时，出现Vuex突变错误。在ag-grid中，我可以使用valueSetters和getters来避免这种情况，但是我找不到在Handsontable中如何做到这一点。另外，由于突变错误，不会触发afterChange事件。计算值的获取和设置也无济于事。有人遇到过同样的问题吗？我可能可以编写自定义编辑器，但这是我想做的最后一件事，因此可能还有另一种解决方案。

谢谢。

Answer 1

选项1 ：请确保从vuex存储向Handsontable的settings.data属性提供a copy of the data。这样，当Handsontable更改数据时，vuex不会抱怨，但是您必须确保所有更改都已提交给存储。

示例：

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

选项2 ：添加一个beforeChange hook并将更改提交到存储，然后返回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;
    }
  }

（如果您共享一些特定的代码示例，将更容易获得详细的帮助）

可手动编辑触发Vuex突变错误

1 个答案: