Vuex模块化modules

1.什么是modules

在Vuex中State的使用是一个单一的状态树结构，应该把所有的数据状态都放在state里面，如果项目比较复杂，那么state就是一个很大的对象了，store对象也将变得非常大，难于管理。

modules可以让每一个模块都拥有自己的state、mutation、action、getters，这样的话，数据结构层级会变得非常清晰，方便管理。

比如：我们的项目有login用户登录模块，product产品模块，order订单模块，如果没有modules，我们的所有state、mutation、action、getter都会在一个js文件里，将会变得非常混乱

如果有了modules，我们的数据结构，大概是这样的：

以login模块为例，在代码中，是这样的

//vuex/login.js
export default {
   const state = {}
   const mutations = {}
   const actions = {}
   const getters = {}
}

//vuex/index.js
import Login from './login'

export default new Vuex.Store({
   modules:{
      Login
   }
})

这样的话，我们就会以模块为单位，把Vuex进行模块化划分

然而，我们只是完成了第一步的优化(模块级)，我们还可以进一步的进行优化(操作级)，在细化一下，把state、mutations、actions、getters进行拆分(ps:学会了这一级，就可以入门redux了)

以login模块为例，我们可以把login.js这样的进行拆分

先删除login.js，新建login文件夹

//vuex/login/state.js
export default {
   userCode:'0'
}

//vuex/login/mutationsTypes.js
export const SET_USER_CODE = 'SET_USER_CODE'

//vuex/login/mutations.js
import { SET_USER_CODE } from './mutationsTypes.js'
export default {
   [SET_USER_CODE]( state,code ) {
      state.userCode = code
   }
}

//vuex/login/actions.js
import { SET_USER_CODE } from './mutationsTypes.js'
export default {
   set_user_code( {commit},id ) {
      commit( SET_USER_CODE,id )
   }
}

//vuex/login/index.js
import state from './states'
import mutations from './mutations'
import actions from './actions'
export default {
   state,
   mutations,
   actions
}

最后，我们在vuex/index.js中把login模块还是整体进行引入就可以了

//vuex/index.js
import Login from './login'

export default new Vuex.Store({
   modules:{
      Login
   }
})

 

总结：

Vuex中有5个核心的概念：

1.state：公共数据状态存储

2.mutations：唯一操作state状态的方法

3.actions：触发mutations，进行对state状态的修改(此时可以进行一些异步操作)

4.getters：可以对state进行一些过滤操作，而不影响原state数据(使用JSON拷贝)

5.modules：可以对store进行一些模块划分，功能划分，达到便于管理的目的