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（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。