In afterChange hook, can't send proper data to vuex by using $store.commit()

Tags: #<Tag:0x00007efc6d1838a8>
#1

Hello,

It seems like there’s a problem to commit data to vuex in afterchange() hook.
I have over 8000 lines… so… let me know if you need a test case. I will let you know the github link where I’ve made a repo.

Problem is that
when edit vuex data from hottable and trying to commit it, it can’t send an edited data(it only works for the first commit(edit)).

if you’re planning to repro
Repro

  1. add node data by using first top button(looks like marker) on the map(just click anywhere map)
  2. edit added new data from hottable id, name, whatever you want to edit
  3. then re-edit edited added new data again, id, name, whatever you want
  4. check the sent out data.

you can check there’s no problem in afterChange hook without ‘this.$store.commit()’
once you block that line and check out the console, you will get the correctly updated data.
However, whenever you add this.$store.commit() you will get the old data whenever you reedit.(first edit is OK)

Regards,

#2

Also here https://handsontable.com/docs/7.4.2/frameworks-wrapper-for-vue-vuex-example.html is the same demo that usescommit() inside the afterChange hook.

when edit vuex data from hottable and trying to commit it, it can’t send an edited data(it only works for the first commit(edit)).

and it works for me for every change that I tested. Would you be able to create a demo that is based on Handsontable only (without the map)?

#3

Thanks for the reply. I’ve checked your example and I couldn’t just use it as it overrides all data at once. It won’t be an issue if you don’t have many data but we do sadly. Most of tables have over 100,000 data so I tried to code by usingafterChange(changes, src) only, and the issue(couldn’t get the proper data when re-edit it) when I use ‘changes’ to get the updated data.

It was my bad that I didn’t think of using ‘getSourceData()’… cuz It refs DOM directly which is the way that we do not prefer as we might have side effects(it’s kind of vue’s principle as it’s MVVM pattern). Also, getSourceData and changes looked very similar to me so…

Anyway, bottom line is that I’ve get the updated data from getSrouceData not from changes, and it works fine.

Many thanks for the support. I will leave here related code part in case some one might have similar issue.

methods: {
afterChange(changes, src) {
      if (src == "edit" || src === "edit") {
        let sourceDataArr = this.$refs.nodeListTb.hotInstance.getSourceData();
        let editedIndex = changes[0][0];
        let editedNodeData;

          if (sourceDataArr[editedIndex]) {
            editedNodeData = {
              index: editedIndex,
              nodeid: sourceDataArr[editedIndex ].nodeid,
              nodename: sourceDataArr[editedIndex ].nodename,
              lat: sourceDataArr[editedIndex ].lat,
              lng: sourceDataArr[editedIndex ].lng,
              keyvalue: sourceDataArr[editedIndex ].keyvalue,
            };
          }

        this.$store.commit("editNodesFromHandsontable", editedNodeData);
      }
    },
}


store
    editNodesFromHandsontable ( state, payload )
        {
          let editedNodeData = {
            nodeid: payload.nodeid,
            nodename: payload.nodename,
            lat: payload.lat,
            lng: payload.lng,
            keyvalue: payload.keyvalue
          }
          state.nodeList.splice( payload.index, 1, editedNodeData )
        },
#4

Thank you for the update. You’ve revealed where we talk of documentations for the wrappers. That is surely something we should consider while enhancing the docs for the Vue version.