vuex Module将 store 分割成模块的操作
由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store对象就有可能变得相当臃肿。
为了解决以上问题,Vuex允许我们将store分割成模块(module)。每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割:
constmoduleA={ state:()=>({...}), mutations:{...}, actions:{...}, getters:{...} } constmoduleB={ state:()=>({...}), mutations:{...}, actions:{...} } conststore=newVuex.Store({ modules:{ a:moduleA, b:moduleB } }) store.state.a//->moduleA的状态 store.state.b//->moduleB的状态
补充知识:vuex实现模块化分割,在不同类别的文件中放置对应的数据及操作
目录结构为
store文件夹下有index.js、modules文件夹,在modules文件夹下是你的模块,最好通过功能命名
一级目录:store
一级目录下文件:index.js
二级目录:modules
三级目录demo
三级目录下文件demo.js
三级目录下文件getter.js
三级目录下文件mutations.js
三级目录下文件state,js
各文件的内容为
一级目录下index.js
importVuefrom'vue' importVuexfrom'vuex' importdemofrom'./modules/demo/demo.js'; Vue.use(Vuex); const$store=newVuex.Store({ modules:{ demo } }); exportdefault$store;
三级目录下demo.js
importstatefrom'./state.js'; importmutationsfrom'./mutations.js'; //按需要导入 //importgettersfrom'./getters.js'; //importactionsfrom'./actions.js'; exportdefault{ //将导入的文件暴露出去 state, mutations }
三级目录其他文件
exportdefault{}
最后在main.js中挂载
importVuefrom'vue' importAppfrom'./App' importrouterfrom'./router' import{RouterMount}from'uni-simple-router' //引入vuex importstorefrom'./store' //把vuex定义成全局组件 Vue.prototype.$store=store Vue.config.productionTip=false App.mpType='app' constapp=newVue({ store, ...App }) app.$mount();
以上这篇vuexModule将store分割成模块就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。