Vuex 懒加载

# 知识点

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

# 使用方法

先将之前引进了来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
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

接着在需要用到Vuex的页面进行手动注册

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

<style scoped></style>

1
2
3
4
5
6
7
8
9
10
11
12

这种方式虽然是可以实现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}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

然后在main.js引入

...
import vuexLazy from './plugins/vuexLazy'
Vue.use(vuexLazy)
...

1
2
3
4
5

# 使用

只需要在某个模块提供一个vuexModuleName的key就可以，比如如下，我们提供一个vuexModuleName为home，它就会将home模块动态注册。

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

1
2
3
4
5
6
7
8

#Vue #冷知识

最近更新时间： 2021/08/25 09:25:09