vue-tables-2 how to handle the ROW_CLICK event in a module?(vuex)

Question

I've a module named "csv", to handle csv files, and a vue-tables-2 with vuex:

Store structure:

-store
 -modules
   -csv.js
 -index.js

index.js:

Vue.use(Vuex)

    const store = new Vuex.Store({
        modules: {
            commons,
            ldap,
            csv <---- I want to execute the mutation in this module
        },
        mutations: {
            ["csvTable/ROW_CLICK"](state, data){
               <---- but now it's running here
            },
        }
    })

csv.js

// initial state
const state = {
    //...
}

// getters
const getters = {
    //...
}

// mutations
const mutations = {
    ["csvTable/ROW_CLICK"](state, data){
       < ---I want to execute the mutation here
    }
}

export default {
   //...
}

So I want to know how can I execute the ROW_CLICK mutation in the csv module.

I thought I could do it like this:

index.js:

  ["csvTable/ROW_CLICK"](state, data){
       this.commit(csv/ROW_CLICK, data);
  },

But I do not think it's the best way to do it.

Thank you.

score 1 · Answer 1 · answered Apr 03 '18 at 16:49

Learn to use actions.It is recommended to execute your mutations through actions always.

In csv.js add an action like:

   actions: {
     callMutation({commit}, pass_property){ //pass_property is passed to action
       commit('the_mutation_you_want_to_Call',pass_property)
     }
   }

Also the commit object is required to actions to commit mutation.But, if you want, in actions you can use the getters and state as well.See below:

Example:

  actions: {
    actionName({commit,getters,state}) {}
  }

vue-tables-2 how to handle the ROW_CLICK event in a module?(vuex)

1 Answers1