Vue-tables-2: Feature Request: Add Vuex Store mutation for changing data and / or Refresh table

[bayi]

• Vue.js version:2.5.2
• consumed using: webpack

Hi

I have the following scenario:
Im using client tables for displaying points in a simple game, there is no backend for it, the games are only for the session, nothing is stored either.
Im having hard time adding / updating data in the table and then refreshing it also.

I solved it currently with the following:

1. Mutation for updating data which accesses root state ( i feel this is a bit hacky ):

    [types.GENERAL_UPDATE_TABLE_DATA] (state, { table, data})
    {
        this.state[table].data = data
     }

1. This works for initial loading the data etc, but after changing some data the changes arent reflected until "something" happens. I solved it this way which is too hacky for my taste, but didnt found a better solution:

...component methods...

  refreshData()
  {
        const oldFilter = this.state[this.table].query // Need to pull in the rootState here also
        this.$store.commit('tableUsers/SET_FILTER', '---') // Other random value
        this.$store.commit('tableUsers/SET_FILTER', oldFilter)
   }

• Can you please add a mutation for just refreshing data ? ( This solves only half of my problem )
• Can you please add a mutation for updating/refrehsing table data ? ( This would be preferred )

[matfish2]

You can define your own mutations and state on the module and it will be merged when the module is registered. E.g:

modules:{
  myTableName:{
    state:{
      myOwnData:'someData'
    },
      mutations:{
     addRow(state) {
          state.data.push(row);
      }
    }
  }     
}

Use dev tools to look under the hood and see the structure of the module

[bayi]

Thanks

[Denis4yk]

@matfish2

Are you sure, that your snippet still works. Cause now it gives me an error.

[Denis4yk]

@matfish2 Please, update on this "merge functionality". I'm even ready to help, just this feature is very-very important. I have to mutate your moudule's store in my actions, what leads to some errors on production and non-trackable changes, what is very hard to debug.

[matfish2]

At the moment the module name is reserved and cannot be used by the consumer. I believe you can simply change the name of your module and still achieve the same functionality.

[Denis4yk]

@matfish2

No, I can't.
Imagine, that I have an "actions" column. It makes a request to the server, it performs some complex logic and returns an updated row.

How can I update a row your module from my mutation? I can't, cause rootState is NOT accessible in mutations. Only actions. And this is quite a bad practice + I can't watch the history changes.

I know, that you are not obliged to implement all features and I don't expect you to do that ASAP, but, really, this is a very important issue and I'm reinventing bicycles and abusing the whole Vuex flow just to stay with your package, cause it's awesome.

The solution is to merge your mutations with the customers'. To solve this issue you have to allow to merge ONLY mutations. You don't have to think about data consistency for now. I can help you with docs or whatever. Just to make it working :)

[matfish2]

I have applied a fix to merge the state. Works on my end. Can you please update the package and confirm?

[Denis4yk]

@matfish2

Thanks for such a fast response 👟🔥🎉

Yes, from my side I can perform mutations, but I don't know, if new bugs have appeared. If spot any, I'll let you know.

[andreic96]

@matfish2 it seems that unregisterModule in the fix breaks the vue-router functionality.
I think we need to add the preserveState check here as well, or why was the unregisterModule added ?