vue插件开发：vuex模块化懒加载插件
vue 插件
插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制，一般有下面几种：
添加全局方法或者 property。如：vue-custom-element
添加全局资源：指令/过滤器/过渡等。如 vue-touch
通过全局混入来添加一些组件选项。如 vue-router
添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router
使用 vue 插件
Vue.use()：通过全局方法 Vue.use() 使用插件，它需要在你调用 new Vue() 启动应用之前完成。Vue.use() 的参数必需是一个对象或者是一个函数：
参数是一个对象，Vue.use() 会执行这个对象暴露的 install 方法
参数是一个函数，Vue.use() 会将函数作为 install 方法执行（执行函数）
vue 插件开发
vue 的插件应该暴露一个 install 方法，这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象
MyPlugin.install = function (Vue, options) { // 1. 添加全局方法或 property Vue.myGlobalMethod = function () { // 逻辑... } // 2. 添加全局资源 Vue.directive('my-directive', { bind (el, binding, vnode, oldVnode) { // 逻辑... } ... }) // 3. 注入组件选项 Vue.mixin({ created: function () { // 逻辑... } ... }) // 4. 添加实例方法 Vue.prototype.$myMethod = function (methodOptions) { // 逻辑... }}
vuex 模块化懒加载插件
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化
modules 模块化状态管理
由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿，为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割
遇到问题
在开发大型项目时，每个组件都有自己的 vuex module 模块，当状态数据量过大时，使用 webpack 打包后的文件会非常大，造成首页加载的内容过多，延时过长，不利于用户体验，使用 vuex 模块化懒加载可以实现加载组件时再去加载组件相对应的 vuex module 模块，减少首页加载压力，优化用户体验，提高性能
vuex 模块化懒加载插件开发
新建 vuexModulePlugin.js 作为插件开发文件
vuexModulePlugin.js：
//定义插件对象var vuexModulePlugin = { //暴露install方法，vue.use()时执行该方法 install: function(vue) { //vue.mixin()全局混入 vue.mixin({ //在beforeCreate钩子中调用 beforeCreate: function() { //判断当前组件是否需要加载vuex模块(isVuex属性在需要加载vuex模块的组件options中定义) if(this.$options.isVuex) { //获取组件中的name名（需要和对应的vuex模块名相同） var name = this.$options.name //动态引入组件对应的vuex模块 import("./store/modules/" + name).then(res => { //使用vuex提供的registerModule api，动态注册vuex模块 this.$store.registerModule(this.$options.name, res.default) }) } } }) }}//导出插件对象export default vuexModulePlugin
在需要懒加载 vuex 模块的组件中定义判断属性
home.vue：
<template> <div> {{ myName }} </div></template><script>export default { //定义vuex模块懒加载的判断属性 isVuex: true, //name需要和对应的vuex模块名相同 name: 'home', data() { return { myName: "" } }， created() { this.myName = this.$store.state.home.name } ......}</script><style scoped> </style>
在 vuex 文件夹 store 中创建 modules 作为模块目录，创建组件对应名称的 vuex 模块文件（文件名需要与对应组件的 name 名相同）
home.js：
export default { state: { name: "廊坊吴彦祖" }, getters: { ...... }, mutations: { ...... }, actions: { ...... }}
在 main.js 中引入插件并通过 Vue.use() 使用插件
main.js：
import Vue from 'vue'......//引入插件import vuexModulePlugin from './vuexModulePlugin'//通过Vue.use()使用插件Vue.use(vuexModulePlugin)new Vue({ ...... render: h => h(App),}).$mount('#app')