知识点

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,暂时还没想到解决方案，之后会去研究研究；有方案的同学，欢迎交流交流。