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进行一些模块划分,功能划分,达到便于管理的目的