Handsontable 编辑触发 Vuex 突变错误

Question

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

谢谢。

Answer 1

不要直接改变数据，这是一种反模式，如果被发现这样做很可能会出错。

尝试在 Vuex 中编写突变，并使用您要更新的负载数据提交这些突变。将所有状态更新逻辑写在 mutations 中。

如果数据是从异步源获取的，请尝试为每个更改分派操作，并且在这些操作中，提交突变和其余部分与上述相同。

希望对您有所帮助。

Answer 2

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

示例：

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

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

（如果分享一些具体的代码示例，详细帮助会更容易）

Handsontable 编辑触发 Vuex 突变错误

Handsontable edit triggers Vuex mutation errors

handsontable

vue.js

vuex