Vue --- Vuex中，modules的概念理解
一、Vuex是什么，官网的说法是，vuex是一个专为vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
二、Vuex的五大核心概念之一modules
modules，可以让每一个模块拥有自己的state、mutation、action、getters，使得结构非常清晰，方便管理；如果所有的状态或者方法都写在一个store里面，将会变得非常臃肿，难以维护。
1、我们正常在Vuex配置文件中写store的时候是这么写的
const store = new Vuex.Store({
state:{
},
mutations:{
},
getters:{
},
actions:{
},
modules:{
}
})
2、如果需要新开辟一个模块，这么写就可以，其中moduleA 是可以自己任意命名的
const moduleA = {
state:{
},
mutations:{
},
getters:{
},
actions:{
}
}
3、然后再在初始的store中引入就行，比如下面代码的a:moduleA
const store = new Vuex.Store({
state:{
},
mutations:{
},
getters:{
},
actions:{
},
modules:{
a:moduleA
}
})
代码举例说明：
例一：简单的显示内容
1、先在Vuex配置文件中进行配置
const moduleA = {
state:{
name:"Rick"
},
mutations:{
},
getters:{
},
actions:{
}
}
const store = new Vuex.Store({
state:{
},
mutations:{
},
getters:{
},
actions:{
},
modules:{
a:moduleA
}
})
2、然后在路由组件中使用即可
Vuex第七个页面
{{$store.state.a.name}}
效果如下图
例二：简单的修改内容
1、首先，Vuex配置文件的代码
const moduleA = {
state:{
name:"Rick"
},
mutations:{
moduleAupdname(state){
state.name = "Liu"
}
},
getters:{
},
actions:{
}
}
const store = new Vuex.Store({
state:{
},
mutations:{
},
getters:{
},
actions:{
},
modules:{
a:moduleA
}
})
2、在路由组件中进行修改，其实基本和初始的写法没什么区别，只需要顺着新写的modules模块找到对应的字段或者方法就行
Vuex第七个页面
{{$store.state.a.name}}
效果如下
并且在你的Devtools里面也能看到新的模块以及数据的更新
例三：新的modules中，getters的参数rootState的使用
1、比如如下代码，在初始的store的state中，有一个状态是counter:100，然后在新的模块moduleA 中的getters里面，有一个方法fullname，可以看到该方法除了有state和getter两个参数以外，还有一个参数是rootState，这个参数的意思就是根的状态，也就是用于去初始的store的state中获取数据
const moduleA = {
state:{
},
mutations:{
},
getters:{
fullname(state,getter,rootState){
return rootState.counter
}
},
actions:{
}
}
const store = new Vuex.Store({
state:{
counter:100,
},
mutations:{
},
getters:{
},
actions:{
},
modules:{
a:moduleA
}
})
2、然后我们去路由组件中调用，注意，这个时候我们写$store.getters的时候，就不用写成$store.getters.a.fullname了，因为程序会默认先从初始的store中的getters寻找有没有fullname这个方法，如果没有，就会去新的模块moduleA中寻找，这就意味着，在开发时，一定不要写重复名字的方法
Vuex第七个页面
{{$store.getters.fullname}}
最终效果如下
