How correct (?) Use vue.mixin () to be lazy

preface

Most of the pages and functions developed recently are based on tables, and most of the JSON data obtained by the interface needs to be processed, such as timestamp conversion or status code escape. For this problem, each big mainstream framework provides similar to filtering method, in Vue, generally is defined on the page filter and then used in the template file | for processing.

This method and the previous traversal number group wash data is convenient a lot, but, when I found that in many pages have the same filter, each page to copy again is very painful, so I decided to use vue.mixin () to achieve a code, infinite reuse.

Finally, all filters can be packaged as a vue plug-in, which can be used by calling vue.use (), or even uploading the NPM package, and can be directly installed when developing different projects. (Considering the recent update is relatively fast, so the step of packaging and uploading is delayed, and the version will be completed after it is slightly stable.)

The body of the

Enough gossip, let’s get down to business.

Vue. What was called a mixin

The best way to learn about a new framework or API is to go to Vue. Mixin ().

In a nutshell, vue.mixin () can mix custom methods you create into all Vue instances.

The sample code

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

Run your project and you’ll see a “success” output on the console.

The created method for all Vue instances has been changed to our custom method.

Using the Vue. Mixin ()

The next idea is simple, we combine all the filter functions into a single file and import them in main.js.

The code is very simple, but we can write it in a more formal way. There is a more detailed style guide on Vue’s official website for reference.

Because our custom method will be mixed in all instances, if we follow the previous method, it will inevitably be in danger of overwriting the original method. According to the official suggestion, add prefix $_ to the mixed custom method name to distinguish it.

Create a config.js file to store the meaning of the status code and expose it

export const typeConfig = {
  1: "type one".2: "type two".3: "type three"
}
Copy the code

Create a filters.js file to hold all the custom functions

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

Finally, we introduce our set of filters methods in main.js

import filter from "./filters"
Vue.mixin(filter)
Copy the code

Next, we are free to use custom functions in the.vue template file

<template>
  <div>{{typeStatus | $_filterType}}<div>
</template>
Copy the code

Packaging plug-in

Let’s briefly apply the method of making plug-ins in Vue. After the plug-in is created, vue.use (myPlugin) can be used.

First, attach the official documentation of the plugin [click me to view].

In short, wrapped plug-ins require an install method to load the plug-in into Vue.

The source code for 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
  };
}
Copy the code

Install: plugin.install: plugin.install: plugin.install: plugin.install: plugin.install

In the code

The config.js file is still needed, where all the escape text corresponding to the status code is saved

Create a myplugin.js file and this is the plug-in we wrote

import { typeConfig } from "./config"

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

The plug-in’s install function takes an instance of Vue as its first argument, and you can pass in some custom arguments later.

In main.js, instead of vue.mixin (), we use vue.use () to load the plug-in.

import myPlugin from "./myPlugin"
Vue.use(myPlugin)
Copy the code

So far, we have completed a small plug-in, and to escape the state of our code filters in all of the Vue instance, in the Vue template file, we can use {{typeStatus | $_filterType}} to a status code to escape.

conclusion

Vue.mixin() can mix custom methods into all Vue instances.

In the interest of rapid development, a group of people came up with this approach, but it remains to be seen whether this is a good one, not that it will affect the original code, but all Vue instances also include third-party templates.

This article can be reprinted at will, as long as the original address is attached.

If you think my blog is helpful to you, please feel free to appreciate it. Liking it is also a means to keep me motivated.

To be perfect

Release NPM package

The new item

Using filter in V-HTML (May 28, 2018)

Recently, I encountered a problem about status code filtering, but the effect is to display different icon ICONS through different status codes, which is different from the above text filtering. Above, use {{styleStatus | $_filterStyleStatus}} is using v – text rendering, if encounter need to render HTML tags can have a headache.

And the old way of doing it, here’s the thing: I’m going to write a random piece of code.

.<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>.Copy the code

No! This is too not fashion and not cool, I instinctively refused to write this way, but the problem still needs to be solved, I turned to find another way.

While looking at the Vue documentation, one of the API $options official documentation caught my attention. I just needed an API that could access the current Vue instance.

First, we define a status code object again in the config.js file, and here we set its corresponding content as an HTML paragraph.

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>"
}
Copy the code

Next, we add it to the filters.js file, writing it the same as filters before.

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

The main thing is here, where we need to render in the template file, we use V-HTML to render.

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

All the places that need to render the icon according to the status code can be completed by this method.

Facts have proven that lazy is not necessarily wrong, critical look at the direction of the lazy, although the title of this blog is lazy, but I just for repetitive meaningless handling code and bored, looking for the corresponding solution but didn’t slack off, on the contrary, in search of better and faster more convenient way, I’m getting back to the fun of coding.