6.手把手教你使用Vuex - 常量代替XXX事件类型

上一个步骤是介绍了将未来可能十分庞大的store按属性进行了比较详细的拆分，这样会带来一些好处，当然拆不拆完全取决于你。接下来我们介绍的是“常量代替XXX事件类型”，当然，这个步骤和上一步一样，属于优化的步骤，做不做，取决于你。当然了，你要先看看下面的介绍再决定做不做嘛，是吧，哈哈。

• 我们要在上面的基础上需要增加一些文件

  store
   |___index.js
   |___state.js
   |___mutations.js
   |___getters.js
   |___actions.js
   |___mutation-types.js   <--- 新增mutation的类型
   |___getter-types.js   <--- 新增getter的类型
   |___action-types.js   <--- 新增action的类型
  

• 多的不说，代码很简单，直接上代码：

  // mutation-types.js
  export const SET_NUM_IS_5 = 'setNumIs5'
  export const SET_NUM_IS_WHAT = 'setNumIsWhat'
  

  // getter-types.js
  export const GET_LIST_LENGTH = 'getListLength'
  

  // action-types.js
  export const SET_NUM = 'setNum'
  

• 接下来修改对应的actions.js、mutations.js、getters.js即可，下面介绍mutations.js修改后的效果，其余的就不展示了，同理即可。

  import {SET_NUM_IS_5,SET_NUM_IS_WHAT} from './mutation-types'
  
  const mutations = {
    [SET_NUM_IS_5](state){
      state.num = 5
    },
    [SET_NUM_IS_WHAT](state,payload){
      state.num = payload.num
    }
  }
  export default mutations
  

• 在使用mutation的时候，请尽量按照规范的来，就像这样：

  this.$store.commit(SET_NUM_IS_5)
  

官方介绍：使用常量替代 mutation 事件类型在各种 Flux 实现中是很常见的模式。这样可以使 linter 之类的工具发挥作用，同时把这些常量放在单独的文件中可以让你的代码合作者对整个 app 包含的 mutation 一目了然。

到这里，使用“常量代替XXX事件类型”的整改就差不多了，vuex文档中只介绍了对mutation使用这种常量代替，我个人认为，getters和actions也可以按照这种思路去整改一下，这样在多人合作的时候会带来一些便利，且在回顾和统计项目中使用了哪些getters或者mutations的时候，只去看对应的types文件就好了，很方便，而且也很规范，当然，还是那句话，不这样做也能实现vuex的功能，那到底要不要这么做，取决于你自己和目前的项目情况，如果你不喜欢，完全可以不这么做。