介绍
这篇文章给大家介绍使用Vuex怎么实现模块化,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
<强> 1文件结构
文件结构的话,模块化的使用要多一个模块的文件夹,里面放着细分模块的js文件/模块名文件夹。
这里官方的标准是一个模块一个js文件,但是要是模块太复杂的话,也可以把里面的代码拆分出来。
//,store 文件夹,
│,actions.js
│,getters.js
│,index.js
│,mutations.js
│,state.js
│
└─模块
│才能moduleB.js
│才能
└才能─moduleA
,,,,index.js
,,,,mutation.js
,,,,,的状态。js 然后在创建店的js文件中引入这些模块,直接
import moduleA 得到& # 39;。/模块/moduleA指数# 39;
import moduleB 得到& # 39;。/模块/moduleB& # 39;;
export default new Vuex.Store ({
状态,才能
getter,才能
突变,才能
行动,才能
,,模块:{
,,,moduleA,
,,,moduleB,
,,}
}); <强> 2模块的局部状态对象的定义
模块内部的getter,突变和行动,他们方法接收的参数会和根状态的不一样,我们一个一个来
<强> getter
getter的话,他会有三个参数,第一个是模块内的状态,第二个是模块内的getter方法,第三个是根节点状态rootState,
const getters =, {
,bFullName: (getter,状态,还以为;rootState),=祝辞,全部$ {state.bName} '
} <>强变异
突变里面的回调函数传入的第一个参数也是模块内的状态,其他和根状态定义的时候一样
const mutations =, {
,//这里的,“国家”,对象是模块的局部状态
,SET_B_NAME(状态,有效负载),{
,调试器
时间=state.bName 才能;payload.name;
,}
} <>强行动
最后的行动的话,他传入还是只有上下文对象,然后咧,这个对象里面的州属性指模块内的状态,rootState指根状态,如下
const actions =, {
,ASYNC_SET_NAME({,状态,提交,rootState },,有效负载),{
setTimeout(才能(),=祝辞,{
,,state.bName =, & # 39; asyncName& # 39;
,,},4000)
,}
} <强> 3使用 <强>
<强> 3.1国家获取
这个的话要在原来状态名前面加一个模块名才能放到到模块内的对象。具体如下
//,原先的基础上加个模块名
这个。store.state.moduleB.bName美元;//,辅助函数也一样,name 前面加个模块名,Deno
…mapState ({
,,名字:state =祝辞,state.moduleB.bName,
}) <强> 3.2命名空间
getter,突变,行动他们默认都是注册在全局命名空间的,所以我们默认是可以和使用根状态一样去使用他们,但是这样不可避免会出现命名冲突的问题,所以使模块有更高的封装性与复用性,我们可以通过添加“
名称空间:真正的使其成为带命名空间的模块。当模块被注册后,它的所有getter,行动及突变都会自动根据模块注册的路径调整命名。
//, moduleB 模块导出的时候加个,名称空间:,真的,
export default {
名称空间:大敌;的确,
,状态,
getter方法,
,突变,
,行动,
} 3.2.1辅助函数的使用
因为有了命名空间这么一层封装,所以我们在用辅助函数的时候都要多加那么一层模块名,具体看下面代码。
//, getter
这个。$ store.getters [& # 39; moduleB/bFullName& # 39;];,
…mapGetters ({
,bGetter2: & # 39; moduleB/bFullName& # 39;
})//,mutation
美元。store.commit (& # 39; moduleB/SET_B_NAME& # 39;,, {
,名字:& # 39;qq # 39;
})；
…mapMutations ({
,setBname: & # 39; moduleB/SET_B_NAME& # 39;
}),//行动
美元。store.dispatch (& # 39; moduleB/ASYNC_SET_NAME& # 39;,,{,名字:“JJ",});
…mapActions ({
,aSetAge: & # 39; moduleB/ASYNC_SET_NAME& # 39;
}), 每次都要写模块名,这样写下来很烦,所以这些辅助函数给我们提供了一个参数位来绑定命名空间。
//, moduleB 模块内的,bName
…mapState (& # 39; moduleB& # 39;,, {
名称:大敌;state =祝辞state.bName
})//,同理,mapAction mapMutation 也可以这个样子
…mapAction (& # 39; moduleB& # 39;, (
,& # 39;/ASYNC_SET_NAME& # 39;
)
