Vue.use妙用添加动态Router、动态Store

最近在某个项目中发现一种非常妙的写法,通过Vue.use()来添加动态路由和动态添加Store,Store就是Vuex

在一个大项目中,会创建非常多的路由和非常多的Store,那么如何将它们归类整理,让代码显得更加整洁,让后期维护变得更加简单这就是一个刻不容缓的问题。

Router

动态路由不光在权限验证上面可以使用到,在路由的模块化上面也可以使用到,因为在一个大项目中上百个路由,如果都是放在一个文件中那也显得不太好维护,所以这个时候就可以将它分割成为一个一个的路由模块。

Store

对于Vuex的动态注册官方文档已经给出了方法:

import Vuex from 'vuex'

const store = new Vuex.Store({ /* 选项 */ })

// 注册模块 `myModule`
store.registerModule('myModule', {
  // ...
})
// 注册嵌套模块 `nested/myModule`
store.registerModule(['nested', 'myModule'], {
  // ...
})