Vue.js 可手持编辑触发Vuex变异错误

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

---

谢谢。

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

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

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

---

我希望这会有所帮助。

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

例如：

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

  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：添加一个将更改提交到存储，然后返回false的。这会使所有更改都被Handsontable忽略。这将确保Handsontable始终显示提交到vuex存储的内容。警告：这也意味着，在单元格被编辑后，Handsontable将直接显示旧值，直到它被提交到存储区

例如：

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

  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写入操作中的数据提取逻辑或组件（vue），然后提交数据。