知识点
1.import方法
2.$store.registerModule方法
话不多说，直接上代码
import Vue from 'vue'
import Vuex from 'vuex'
// import home from './modules/home'
// import detail from './modules/detail'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
modules: {
// home,
// detail
}
})
可以看到未注册vuex任何module的state是空的
紧接着在你需要用到Vuex的页面进行手动注册。
<template></template>
<script>
export default {
beforeCreate(){
import('../store/modules/home').then(res=>{
this.$store.registerModule('home',res.default)
})
}
}
</script>
<style scoped></style>
就是通过beforeCreate里面的一句代码就能使用懒加载，是不是超级容易。
这种方式虽然是可以实现vuex的懒加载，但是要我们在用到vuex的页面一个一个的去手动实现注册，这样挺烦躁，挺笨的，让我们来对它进行一个封装。
封装后的Vuex懒加载
随便定义一个xxx.js文件，写下如下代码
function install(Vue){
Vue.mixin({
beforeCreate() {
let vuexModuleName = this.$options.vuexModuleName
if(vuexModuleName && !this.$store.state[vuexModuleName]){
import(`../store/modules/${vuexModuleName}`).then((res)=>{
this.$store.registerModule(`${vuexModuleName}`,res.default)
})
}
}
})
}
export default {install}
然后在main.js引入
...
import vuexLazy from './plugins/vuexLazy'
Vue.use(vuexLazy)
...
使用
只需要在某个模块提供一个vuexModuleName的key就可以，比如如下，我们提供一个vuexModuleName为home，它就会将home模块动态注册。
<template>
<div><h1>{{ $store.state }}</h1></div>
</template>
<script>
export default {
vuexModuleName:'home'
}
</script>
注意：提供的vuexModuleName的val值一定要有对应的模块存在
结尾
遗留问题
通过动态注册的Vuex的module，没有同步到vuedevtools,暂时还没想到解决方案，之后会去研究研究；有方案的同学，欢迎交流交流。
