vue插件开发：vuex模块化懒加载插件

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')