Handsontable edit triggers Vuex mutation errors

Question

I am currently working on a big data grid using Handsontable and Vue and my data is stored in Vuex. Problem is, when I edit a cell I get Vuex mutation errors. In ag-grid I can use valueSetters and getters to avoid that, but I can't find how to do that in Handsontable. Also, afterChange events are not fired because of mutation errors. Computed value get and set also do not help me. Anyone had the same issue? I can probably write custom editor, but it is last thing I want to do, so may be there is another solution.

Thank you.

Answer 1

Option 1: Make sure that you supply a copy of the data from the vuex store to Handsontable's settings.data property. This way, vuex will not complain when Handsontable changes the data, but you will have to make sure that all changes gets committed to the store.

Example:

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

Option 2: Add a beforeChange hook that commits the change to the store and then returns false. This makes all changes ignored by Handsontable. This will make sure that Handsontable always displays what is committed to the vuex store. Caveat: This also means that Handsontable will show the old value directly after the cell has been edited until it has been committed to the store.

Example:

  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;
    }
  }

(If you share some specific code examples, it will be easier to help in detail)