Vue Mixins的一些用法

[diveDylan]

概念

mixins可以理解在使用的地方进行Vue Options合并，有点类似装饰器decoration，这里提供几种mixins思想。 mixin其实就是一个vue options object

利用三元返回不同的mixins

// 可以用于不同入参返回不同方法，执行不同函数体
const  mixins = (default = true) => default ? mixin1 : mixin2

// in component a 
const mixinA = mixins()

// in component b
const mixinB = mixins(false)

这里利用mixins做了一层的处理，根据不同传参返回不同mixins，适用于两个简洁的mixins

高阶mixins

提供一个baseMixins，返回一个新mixins

const highMixins = (baseMixin, param) => {
   if (params) {  
       return a new mixins
   }
   return other mixins
}

第二种高阶mixins提供一个provider,注入到当前mixins

// 这种做法适合生命周期和method的分离，增强函数的适配性，比如某个页面你需要初始调用，但是页面B则不需要的情况
const highMixins = provider => Object.assign({}, baseMixins, provider)

用例解释下

我实际项目中很多审核的流程是这样的，先拿到发起者的邮箱，打开审核弹窗，获取审核状态和审核原因内容，最后完成审核状态

// verson 1.0.0
// audit mixins

export default {
     methods: {
         getUserMail() {
             /** some code **/
            this.auditHandler()
          },
         pass() {
             this.getUserMail()
         },
         auditHandler() {
              /** some code **/
          }
    }
}

然后我另一个页面又有差不多的流程，但是部分参数或者逻辑不一样

const baseAudit = (params) => {
     /** some code **/
    return auditMixins
}

抽取base部分利用函数生成一个新的mixin

分頁

如果接口规范足够完美，可以讲请求列表接口抽成mixins

methods: {
    // 根据api进行每个页面的请求不同进行处理
    getList(api) {

    }
 }