因为最近在面一家某在线教育公司的时候，被问到了一道印象比较深刻的题，就是如题目所示：“Vuex怎么实现懒加载”，因为之前的确没有考虑到vuex的懒加载问题，所以就没怎么去思考过这个问题，因此也就被问得一头雾水。现在不懂无所谓，以后再不会就感觉丢大人了。所以，回来之后就研究了一下这个问题和vuex的文档，也得到了自己想要的答案。

需要知道的知识点

• import方法

• $store.registerModule方法

这里简单的介绍一下这两个方法?

import方法，不是我们经常写的es6import,而是webpack为我们提供的import方法，它可以让我们按需的加载一个js模块;

$store.registerModule方法是Vuex为我们提供的一个可以动态注册一个vuex modules。

未使用懒加载的Vuex

未使用懒加载的vuex如上图所以，一初始化就全部模块的数据都加载进来，如果数据少的话还好，如果你的vuex数据超级膨大的呢？那就要炸了。

Vuex实现懒加载出版

首先先将之前引进了来vue modules 注释或者移除。

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懒加载

这里封装主要是用Vue提供的插件机制的方式实现对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的懒加载的一个简单实现和封装，也只是为了提供一种思路，如有需要的同学可以自行完善。

遗留问题

通过动态注册的Vuex的module，没有同步到vuedevtools,暂时还没想到解决方案，之后会去研究研究；有方案的同学，欢迎交流交流。