知識(shí)點(diǎn)

1.import方法
2.$store.registerModule方法

話不多說(shuō)，直接上代碼

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
  }
})

可以看到未注冊(cè)vuex任何module的state是空的
緊接著在你需要用到Vuex的頁(yè)面進(jìn)行手動(dòng)注冊(cè)。

<template></template>
<script>
export default {
  beforeCreate(){
    import('../store/modules/home').then(res=>{
        this.$store.registerModule('home',res.default)
    })
  }
}
</script>

<style scoped></style>

就是通過(guò)beforeCreate里面的一句代碼就能使用懶加載，是不是超級(jí)容易。

這種方式雖然是可以實(shí)現(xiàn)vuex的懶加載，但是要我們?cè)谟玫絭uex的頁(yè)面一個(gè)一個(gè)的去手動(dòng)實(shí)現(xiàn)注冊(cè)，這樣挺煩躁，挺笨的，讓我們來(lái)對(duì)它進(jìn)行一個(gè)封裝。

封裝后的Vuex懶加載

隨便定義一個(gè)xxx.js文件，寫(xiě)下如下代碼

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)
...

使用

只需要在某個(gè)模塊提供一個(gè)vuexModuleName的key就可以，比如如下，我們提供一個(gè)vuexModuleName為home，它就會(huì)將home模塊動(dòng)態(tài)注冊(cè)。

<template>
  <div><h1>{{ $store.state }}</h1></div>
</template>
<script>
export default {
  vuexModuleName:'home'
}
</script>

注意：提供的vuexModuleName的val值一定要有對(duì)應(yīng)的模塊存在

結(jié)尾

遺留問(wèn)題

通過(guò)動(dòng)態(tài)注冊(cè)的Vuex的module，沒(méi)有同步到vuedevtools,暫時(shí)還沒(méi)想到解決方案，之后會(huì)去研究研究；有方案的同學(xué)，歡迎交流交流。