如何正确的(?)利用 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 的地方均可以经过这个办法来完成了。

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