如何在Vuex的csv模块中处理vue-tables-2的ROW_CLICK事件？

我明白你现在的情况——原本绑定给vue-tables-2的csvTable/ROW_CLICK mutation放在了根Store里，想把它挪到专门的csv模块里管理，这样代码结构更清晰对吧？其实很简单，分几步就能搞定：

1. 给csv模块开启命名空间 #

首先修改你的csv.js模块，添加namespaced: true配置，这是让模块内的mutation、action等独立于根Store的关键，避免命名冲突：

// csv.js
// initial state
const state = { /* 你的原有状态定义 */ }

// getters
const getters = { /* 你的原有getters定义 */ }

// mutations
const mutations = {
  // 把根Store里的ROW_CLICK逻辑移到这里，名称可以简化为ROW_CLICK
  ROW_CLICK(state, data) {
    // 这里写你原来在根mutation里的状态修改逻辑
    console.log('处理行点击事件:', data);
    // ... 你的业务代码 ...
  }
}

// 开启命名空间，让模块拥有独立的命名空间
export default {
  namespaced: true,
  state,
  getters,
  mutations
}

2. 清理根Store的冗余代码 #

打开index.js，把根Store mutations里的["csvTable/ROW_CLICK"]定义删掉，现在这个mutation已经属于csv模块了：

// index.js
Vue.use(Vuex)
const store = new Vuex.Store({
  modules: { commons, ldap, csv }, // 保持模块引用不变
  mutations: {
    // 移除["csvTable/ROW_CLICK"]这个定义
    // ... 其他根级mutation保留 ...
  }
})

3. 调整vue-tables-2的配置指向模块mutation #

因为你之前给vue-tables-2指定的mutation是csvTable/ROW_CLICK，现在要改成csv模块命名空间下的路径csv/ROW_CLICK。假设你的vue-tables-2是结合Vuex配置的，大概是这样调整：

// 你的vue-tables-2初始化配置
Vue.use(VueTables.ClientTable, {}, false, 'vuex', {
  // 直接指定rowClick对应的mutation完整路径
  rowClick: 'csv/ROW_CLICK'
})

如果不想改vue-tables-2的配置，也可以在csv模块里直接保留原来的mutation名称，这样不用动配置，但不够规范：

// csv.js的mutations里改成这样
const mutations = {
  ["csvTable/ROW_CLICK"](state, data) {
    // 原来的逻辑
  }
}

另外，如果在组件里手动调用这个mutation，原来的this.$store.commit('csvTable/ROW_CLICK', data)要改成this.$store.commit('csv/ROW_CLICK', data)，或者用mapMutations辅助函数更方便：

import { mapMutations } from 'vuex'

export default {
  methods: {
    ...mapMutations('csv', ['ROW_CLICK']),
    // 调用时直接用 this.ROW_CLICK(data) 即可
  }
}

这样调整后，ROW_CLICK的mutation就会在csv模块里执行了，代码结构也更符合模块化的设计~

内容的提问来源于stack exchange，提问作者Fabio Venturi Pastor