如何正确的(?)利用 Vue.mixin() 偷懒

前言

最近开发的页面以及功能大都以表格为主，接口获取来的 JSON 数据大都是须要通过处理，好比时间戳须要转换，或者状态码的转义。对于这样的问题，各大主流框架都提供了相似于过滤的方法，在 Vue 中，通常是在页面上定义 filter 而后在模板文件中使用 | 进行处理。

这种方法和之前的遍历数组洗数据是方便了许多，可是，当我发如今许多的页面都有相同的 filter 的时候，每一个页面都要复制一遍就显的很蛋疼，遂决定用 Vue.mixin() 实现一次代码，无限复用。

最后，还能够将全部的 filter 包装成一个 vue 的插件，使用的时候调用 Vue.use() 便可，甚至能够上传 npm 包，开发不一样的项目的时候能够直接 install 使用。（考虑到最近更新的比较快，遂打包上传这步骤先缓缓，等版本稍微稳定了以后来补全）

正文

闲话说够，开始正题。

Vue.mixin 为什么物

学习一个新的框架或者 API 的时候，最好的途径就是上官网，这里附上 Vue.mixin() 官方说明。

一句话解释，Vue.mixin() 能够把你建立的自定义方法混入全部的 Vue 实例。

示例代码

Vue.mixin({
  created: function(){
    console.log("success")
  }
})

跑起你的项目，你会发如今控制台输出了一坨 success。

效果出来了意思也就出来了，全部的 Vue 实例的 created 方法都被改为了咱们自定义的方法。

使用 Vue.mixin()

接下来的思路很简单，咱们整合全部的 filter 函数到一个文件，在 main.js 中引入便可。

在上代码以前打断一下，代码很简单，可是咱们能够写的更加规范化，关于如何作到规范，在 Vue 的官网有比较详细的 风格指南 能够参考。

由于咱们的自定义方法会在全部的实例中混入，若是按照之前的方法，不免会有覆盖原先的方法的危险，按照官方的建议，混入的自定义方法名增长前缀 $_ 用做区分。

建立一个 config.js 文件，用于保存状态码对应的含义，将其暴露出去

export const typeConfig = {
  1: "type one",
  2: "type two",
  3: "type three"
}

再建立一个 filters.js 文件，用于保存全部的自定义函数

import { typeConfig } from "./config"
export default {
  filters: {
    $_filterType: (value) => {
      return typeConfig[value] || "type undefined"
    }
  }
}

最后，在 main.js 中引入咱们的 filters 方法集

import filter from "./filters"
Vue.mixin(filter)

接下来，咱们就能够在 .vue 的模板文件中随意使用自定义函数了

<template>
  <div>{{typeStatus | $_filterType}}<div>
</template>

包装插件

接下来简单应用一下 Vue 中插件的制做方法。建立插件以后，就能够 Vue.use(myPlugin) 来使用了。

首先附上插件的 官方文档。

一句话解释，包装的插件须要一个 install 的方法将插件装载到 Vue 上。

关于 Vue.use() 的源码

function initUse (Vue) {
  Vue.use = function (plugin) {
    var installedPlugins = (this._installedPlugins || (this._installedPlugins = []));
    if (installedPlugins.indexOf(plugin) > -1) {
      return this
    }

    // additional parameters
    var args = toArray(arguments, 1);
    args.unshift(this);
    if (typeof plugin.install === 'function') {
      plugin.install.apply(plugin, args);
    } else if (typeof plugin === 'function') {
      plugin.apply(null, args);
    }
    installedPlugins.push(plugin);
    return this
  };
}

很直观的就看到他在最后调用了 plugin.install 的方法，咱们要作的就是处理好这个 install 函数便可。

上代码

config.js 文件依旧须要，这里保存了全部状态码对应的转义文字

建立一个 myPlugin.js 文件，这个就是咱们编写的插件

import { typeConfig } from "./config"

myPlugin.install = (Vue) => {
  Vue.mixin({
    filters: {
      $_filterType: (value) => {
        return typeConfig[value] || "type undefined"
      }
    }
  })
}
export default myPlugin

插件的 install 函数的第一个参数为 Vue 的实例，后面还能够传入一些自定义参数。

在 main.js 文件中，咱们不用 Vue.mixin() 转而使用 Vue.use() 来完成插件的装载。

import myPlugin from "./myPlugin"
Vue.use(myPlugin)

至此，咱们已经完成了一个小小的插件，并将咱们的状态码转义过滤器放入了全部的 Vue 实例中，在 .vue 的模板文件中，咱们可使用 {{ typeStatus | $_filterType }} 来进行状态码转义了。

结语

Vue.mixin() 能够将自定义的方法混入全部的 Vue 实例中。

本着快速开发的目的，一排脑门想到了这个方法，可是这是不是一个好方法有待考证，虽然不是说担忧会对原先的代码形成影响，可是全部的 Vue 实例也包括了第三方模板。

本文能够随意转载，只要附上原文地址便可。

若是您认为个人博文对您有所帮助，请不吝赞扬，点赞也是让我动力满满的手段 =3=。

待完善

发布 npm 包

新增项

在 v-html 中骚骚的使用 filter （2018年05月28日）

最近碰到一个问题，也是关于状态码过滤的，可是实现的效果是但愿经过不一样的状态码显示不一样的 icon 图标，这个就不一样于上面的文本过滤了，上文使用的 {{ styleStatus | $_filterStyleStatus }} 是利用 v-text 进行渲染，若碰到须要渲染 html 标签就头疼了。

按照前人的作法，是这样的，我随意上一段代码。

...
<span v-if="item.iconType === 1" class="icon icon-up"></span>
<span v-if="item.iconType === 2" class="icon icon-down"></span>
<span v-if="item.iconType === 3" class="icon icon-left"></span>
<span v-if="item.iconType === 4" class="icon icon-right"></span>
...

不！这太不 fashion 太不 cool，我本能的拒绝这样的写法，可是，问题仍是要解决，我转而寻找他法。

在看 Vue 的文档的时候，其中一个 API $options 官方文档 就引发了个人注意，我正好须要一个能够访问到当前的 Vue 实例的 API，一拍脑壳，方案就成了。

首先，仍是在 config.js 文件中定义一个状态码对应对象，这里咱们将其对应的内容设为 html 段落。

export const iconStatus = {
  1: "<span class='icon icon-up'></span>",
  2: "<span class='icon icon-down'></span>",
  3: "<span class='icon icon-left'></span>",
  4: "<span class='icon icon-right'></span>"
}

接着，咱们在 filters.js 文件中引入他，写法仍是和之前的 filters 同样。

import { iconStatus } from "./config"
export default {
  $_filterIcon: (value) => {
      return iconStatus[value] || "icon undefined"
  }
}

重头戏在这里，咱们在模板文件中须要渲染的地方，使用 v-html 来进行渲染。

<span v-html="$options.filters.$_filterIcon(item.iconType)"></span>

大功告成，之后须要根据状态码来渲染 icon 的地方均可以经过这个办法来完成了。

事实证实，懒并不必定是错误的，关键看懒的方向，虽然本篇博客写的标题是 偷懒 ，但其实我只是对于重复性的无心义的搬运代码而感到厌烦，在寻找对应解决办法的时候但是一点都没偷懒，相反的，在寻求更快更好更方便的方法的时候，我逐渐找回了当初敲代码的乐趣。