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

拆出来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

测试一下

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);

image.png

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

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

推荐阅读更多精彩内容