网站首页 » 前端开发 » Vue » Vue2 插件编写的完整套路
上一篇:
下一篇:

Vue2 插件编写的完整套路

前言

这篇文章主要是分享下如何编写一个 Vue 插件,就像官方提供的路由插件一样,我们可以通过根实例对象的 use() 方法来把插件挂载到根实例身上,其实说白了就是把一个对象(含有属性或方法)根实例的原型上。让其它继承于根实例的实例可以直接使用这个对象的属性或者方法。我们把本地缓存做成一个插件,下面就是完成这个插件的步骤:

Vue 插件编写之旅

步骤一:

这一些就是从无到有,创造一个本地缓存插件。Vue 插件的制作有大致可以分为两个小步骤:

  • 定义一个对象
  • 把这个对象暴露出去

套路有了,下面我们来看看具体的代码:

LocalStorage.js
/*
 * @Author: 朝夕熊
 * @Date:   2018-02-27 20:44:14
 * @Last Modified by: yunkus.com
 * @Last Modified time: 2018-02-27 21:37:11
 */

let storage = window.localStorage;
let localStorage = {
  // 获取
  getItem: function (key) {
    var value = storage.getItem(key);
    if (value === null) { // 如果不存在
      return false;
    }
    if (value && value.substring(0, 1) === "{" || value.substring(0, 1) === "[") { // 如果字符串符合对象或者数组基本特征
      value = JSON.parse(value); // 把字符串转为对象
    }
    return value;
  },
  // 设置
  setItem: function (key, value) {
    if (getType(value) === "object" || getType(value) === "Array") { // 如果是对象
      value = JSON.stringify(value);
    }
    storage.setItem(key, value);
  },
  // 删除项
  removeItem: function (key) {
    this.getItem(key) && storage.removeItem(key);
  },
  //  清空
  clear: function () {
    storage.clear(); // 清空本地存储
  }
}
// 判断变量类型
function getType(object) {
  /**
   * 方法来源:prototype.js
   * getType(5); // => "Number"
   * getType({}); // => "Object"
   * getType(/foo/); // => "RegExp"
   * getType(''); // => "String"
   * getType(true); // => "Boolean"
   * getType([]); // => "Array"
   * getType(undefined); // => "Window"
   * getType(Element); // => "Constructor"
   **/
  return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
}
export default {
  install: function (vm) {
    vm.prototype.$localStorage = localStorage;
  }
}

步骤二:

这一步就是如何使用它了,这个就非常地简单,像你使用官方路由插件一样,执行一个以下代码就可以:

App.vue
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
// 引入插件
import LocalStorage from '@/lib/LocalStorage'

// 把插件挂载到 Vue 根实例上
Vue.use(LocalStorage);

Vue.config.productionTip = false

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

引入插件,并执行下 Vue.use(LocalStorage) 代码就可以了。此时你就可以在根实例的原型中看到多出了一个 $localStorage 对象。

Vue 插件编写的完整套路

现在你就可以在其它的组件中使用这个本地缓存了:

export default {
  name: "Home",
  created() {
    this.$localStorage.setItem("yunkus", "云库网");
  }
};

可以直接像上面那样通过组件实例来调用这个全局的方法。好,Vue 插件编写的完整套路就只能带你到这里了。

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/vue-plugins-development/

Leave a Reply

Your email address will not be published. Required fields are marked *

评论 END