5.手把手教你使用Vuex - 按属性进行拆分

😋 OK，看完以上的几篇文章，你应该明白了vuex是啥了，在项目中何时去使用了，并且怎么用心里大概也有个度啦，如果能达到这个效果，我觉得前几篇文章没有白写；如果你基于我的介绍有了自己的一些想法，欢迎评论到下方，我们一起讨论一下~ 🤗

🤯 接下来我们想象一下，目前我们介绍的store/index.js里面的内容是非常少的，如果你是一个稍微有些规格的项目，那么你将会得到一个成百上千行的index.js，然后查找一些东西就会非常费劲，我们建议你的一个文件内的行数尽量不要超过500行，不然对于调试来说没有好处。既然问题出来了，我们看一下怎么拆分一下。

• 🤒 我们看到，一个store/index.js里面大致包含state/getters/mutations/actions这四个属性，我们可以彻底点，index.js里面就保持这个架子，把里面的内容四散到其他文件中。

  
  image.png
• 🤖 最终的文件结构

  store
   |___index.js
   |___state.js
   |___mutations.js
   |___getters.js
   |___actions.js
  

• 1. 拆出来state到state.js中

  const state = {
    loading: false,
    todoList : [
      {id:1,name:'11'},
      {id:2,name:'22'},
      {id:3,name:'33'},
    ],
    num: 0,
  }
  export default state
  

• 2.拆出来mutations到mutations.js中

  const getters = {
    getListLength(state) {
      return state.todoList.length + ''
    },
  }
  export default getters
  

• 3.拆出来mutations到mutations.js中

  const mutations = {
    setNumIs5(state){
      state.num = 5
    },
    setNumIsWhat(state,payload){
      state.num = payload.num
    }
  }
  export default mutations
  

• 4.拆出来actions到actions.js中

  const actions = {
    setNum({commit},payload){
      return new Promise((resolve)=>{
        setTimeout(()=>{
          console.log('测试载荷---'+payload.id);
          commit('setNumIs5')
          resolve()
        },1000)
      })
    }
  }
  export default actions
  

• 5.组装到index.js里面

  import Vue from 'vue'
  import Vuex from 'vuex'
  import state from './state'
  import getters from './getters'
  import mutations from './mutations'
  import actions from './actions'
  
  Vue.use(Vuex)
  
  const store = new Vuex.Store({
    state,
    getters,
    mutations,
    actions,
  })
  export default store
  

• 6. 测试一下

  console.log(this.$store.getters.getListLength)
  this.$store.commit('setNumIs5')
  console.log(this.$store.state.num);
  await this.setNumAlias({id:'111'})
  console.log(this.$store.state.num);
  

🤓 以上就是简单的进行了按属性进行拆分store里面的代码，这样就比较清晰了哈，你需要加什么就去哪里加，大家各干各的，互不影响；当然，你完全可以不这么做，引用官方文档中的一句话，“需要多人协作的大型项目中，这会很有帮助。但如果你不喜欢，你完全可以不这样做”。我觉得说的很有道理。OK，接下来一个文章是来介绍当拆分后，方法名字的复用问题，这是我的理解啊，当然官方点的话，就是：‘常量替代 XXX 事件类型’，这究竟是什么，我们来一探究竟。