在本篇文章我们将重点关注代码拆分我们的状态管理 - Vuex模块的优化

在我们进一步了解如何懒加载Vuex模块之前，您需要注意一件重要的事情。您需要了解注册Vuex模块的方法有哪些，以及它们的优缺点。

静态Vuex模块在Store初始化期间声明。以下是显式创建的静态模块的示例：

上面的代码将创建一个带有静态模块userAccountModule的新Vuex Store。静态模块不能取消注册，并且在Store初始化后不能更改它们的结构。

虽然这种方法对应大多数情况没有问题，并且在一个地方声明，那么所有与数据相关的东西都可以保存在一个地方。但这种方法存在一些缺点。

假设我们的应用程序中有一个Admin Dashboard，它关联一个专用Vuex模块adminModule。

你可以想象这样的模块可能非常庞大。尽管仪表板将仅由一小部分用户和应用程序的受限区域（假设在/admin路径下）使用，由于静态Vuex模块的集中注册，它的所有代码都将在主程序包中。所以这肯定不是我们想要的结果，我们更加希望每个Vuex模块模块的注册是根据页面大的分类路由模块来注册的，这样就能够不是在程序初始化的时候就被加载。并且可以将其打包在不同的代码块中，或者在需要时懒加载。

这个时候动态模块就可以帮到我们了！我们来看一下使用动态注册管理模块之后的样子。

我们在Admin.vue 模块的mounted生命周期事件后，注册对应模块的 Store，并且在模块的beforeDestroy事件后，取消注册该模块，以防止同一模块的多次注册。

现在admin对应的Store是属于Admin.vue这个模块，所以它将与代码分割的Admin.vue打包在一起，不会在程序初始化加载的时候被加载文件

延迟加载Vuex模块

这个其实是老生常谈的事情了，和加载其他文件没有太大区别，具体是根据自己项目实际情况使用就好了，大致方法如下

由于是动态导入，AdminModelStore.js内容被打包到一个单独的文件中，只有在调用getAdminModel方法时才会下载该文件。

总结

即使静态Vuex模块注册对于大多数用例来说已足够，但在某些情况下我们可能希望使用动态注册。

如果只在特定路由上需要模块，那么我们可以在适当的路由组件中动态注册它，这样它就不会在主bundle中存在，其实具体还是要根据业务本身去选择，如果小的项目的话，如果是遇到复杂的项目情况下，我们就需要注意开发中能够优化的每个小细节了。所以今天的文章就到这里，觉得不错的土狗请点下再看，让更多人看到此篇文章