模块module
由于vuex使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store对象就有可能变得相当臃肿。(当项目变得越来越大的时候,Vuex会变得越来越难以维护)
模块创建
先在store文件下创建modules文件夹,再创建各个模块JS
再在index.js文件下导入模块文件
在Vue的Vuex下查看模块
state更为推荐的写法:写成函数的形式,return数据(保证数据的独立性)
export default{
state(){
return{
list:[]
}
}
}
访问模块中的state&mutation等
尽管已经分模块了,但其实子模块的状态,还是会挂到根级别的state中,属性名就是模块名
使用模块中state的数据
1)直接通过模块名访问$store.state.模块名.xxx
2)通过mapState映射
import { mapState } from 'vuex'
默认根级别的映射mapState(['xxx'])
computed:{
...mapState(['模块名'])
}
子模块的映射mapState('模块名',['xxx'])-需要开启命名空间
computed:{
...mapState(['模块名','模块名中的子属性'])
}
开启命名空间:在对应模块JS文件中添加如下代码
export default{
namespaced:true
}
使用模块中getters的数据
1)直接通过模块名访问$store.getters['模块名/xxx']
2)通过mapGetters映射
默认根级别的映射mapGetters(['xxx'])
子模块的映射mapGetters('模块名',['xxx'])-需要开启命名空间
调用模块中mutation的方法
注意:默认模块中的mutation和actions会被挂载到全局,需要开启命名空间,才会被挂载到子模块。
如果没有开启命名空间,直接就像访问全局mutation方法语法一样访问即可,不需要有模块名,但是很不合理。
开启命名空间后:
1)直接通过store调用 $store.commit('模块名/xxx',额外参数)
2)通过mapMutations映射
默认根级别的映射mapMutations(['xxx'])
子模块的映射mapMutations('模块名',['xxx'])-需要开启命名空间
调用模块中actions的方法
如果没有开启命名空间,直接就像访问全局actions方法语法一样访问即可,不需要有模块名,但是很不合理。
开启命名空间后:
1)直接通过store调用 $store.dispatch('模块名/xxx',额外参数)
2)通过mapActions映射
默认根级别的映射mapActions(['xxx'])
子模块的映射mapActions('模块名',['xxx'])-需要开启命名空间