背景
由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。
我们可以按模块异步拆分Vuex文件,即不同模块导入自己需要用到得Vuex文件。
原理
在需要用到的vuex的vue页面,加入isVuex是否需要异步加载vuex的判断,如果需要就加载对应的Vuex文件
文件目录
步骤
1、需要用到vuex的vue文件内部加入isVuex
name: 'mode1Index',//名字需要和模块内的vuex文件名一致,方便后续使用
isVuex: true
2、编写异步拆分vuex的插件
vueplugin/index.js
var splitVuex = {
install: function(vue){
vue.mixin({
beforeCreate: function(){
if(this.$options.isVuex){
var name = this.$options.name;
var that = this;
//import会返回一个promise方法
import("../store/module/"+name).then((res)=>{
//registerModule注册模块,vuex方法
//registerModule(['nested', 'myModule'],...)注册嵌套模块 nested/myModule
//unregisterModule(moduleName) 来动态卸载模块
//注意,你不能使用此方法卸载静态模块(即创建 store 时声明的模块)
that.$store.registerModule(that.$options.name,res.default)
})
}
}
})
}
}
module.exports = splitVuex;
总vuex文件,store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state:{
num: 1
}
})
模块vuex文件,module/model1Index.js
export default {
state:{
num2: 3
}
}
3、main.js中导入使用插件
import vuepl from './vueplugin'
vuepl.use(vuepl)
4、页面内使用
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h1>{{$store.state.num}}</h1>
<h1>{{$store.state.mode1Index.num2}}</h1>
</div>
</template>
<script>
export default {
name: 'mode1Index',
isVuex: true,
data () {
return {
msg: 'Welcome to Your Vue.js App',
}
}
}
</script>
效果展示
5、打包之后你就会看到会多一个处理文件,即对应的模块vuex的处理文件,已经被单独拆分出来