某在线教育面试官:Vuex怎么实现懒加载?

·  阅读 1124
某在线教育面试官:Vuex怎么实现懒加载?

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

需要知道的知识点

  • import方法

  • $store.registerModule方法

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

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

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

未使用懒加载的Vuex

image.png

未使用懒加载的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
  }
})


复制代码

image.png

未注册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里面的一句代码就能使用懒加载,是不是超级容易。

效果👇

image.png

这种方式虽然是可以实现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值一定要有对应的模块存在

image.png

结尾

以上是对Vuex的懒加载的一个简单实现和封装,也只是为了提供一种思路,如有需要的同学可以自行完善。

遗留问题

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

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改