开发vue 插件 及异步拆分加载vuex

开发vue 插件使用到的关键方法

install, mixin,this.$options获取自定义配置

原理是这样的

function a1() {
  console.log('a1');
}
// 只是a 函数的输出a1
Vue.use(a1) // a

function a2() {
  console.log('a2');
}
a2.install= function() {
  console.log('install');
}
// 有install的时候只 输出install
Vue.use(a2) // install

我们再看一个实例

问题：项目vuex 体积过大，导致打包结果过大

方案：开发vue插件，先按组件异步方式  再拆分  加载vuex

先开发我们的插件index.js

// 这里是install 和mixin 能做什么
var a = {
  install:function(vue){
    // mixin混入 可以混入methods 和生命周期等
    vue.mixin({
      created:function() {
        console.log('i am vueplug mixin');
      }
    })
  }
}

// vuex案例
var customPlug = {
  install:function(vue){
    // mixin混入 可以混入methods 和生命周期等
    vue.mixin({
      beforeCreate:function() {
        // 可以通过this.$options拿到我们的自定义配置，骚气
        // console.log(`this is customPlug `);
        if (this.$options.isVuex) {
          //import 异步加载组件
          import(`../store/moudle/${this.$options.name}`).then((res)=>{
            //console.log(res);  // 解释为何用res.default的原因
            // registerModule 是$提供的API
            this.$store.registerModule(this.$options.name, res.default)
          })
        }
      }
    })
  }
}


export {
  a,
  customPlug
} 

在main.js加载我们写好的vue 插件

// main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'


Vue.use(a)
Vue.use(customPlug)



Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

在定义我们的store中的数据 moudle1Second.js  需要和使用vuex数据的组件配置的name 一致

export default{
  state: {
    num: 666666666
  }
}

在组件中使用，组件的name 需要与store定义的文件名一致 

<template>
  <div>
    <p>this is moudle1.sconde组件</p>
    <p>{{this.$store.state.moudle1Second.num}}</p>
  </div>
</template>

<script>
export default {
  // 这里叫做自定义配置，我们可以通过this.$options获取到的
  name: 'moudle1Second',
  // 标识，判断该组件是否需要异步加载vuex
  isVuex: true,
  data() {
    return {
    }
  },
}
</script>

目录结构图

效果图