Plugin trong Vue.js

Để cung cấp, bổ sung thêm tính năng cho Vue ở cấp toàn cục Vue cung cấp cho người dùng khả năng viết một số kiểu plugin khác nhau. Bài học dưới đây sẽ hướng dẫn cho các bạn cách viết một số plugin trong Vuejs

Plugin cấp toàn cục

Các plugin thường được dùng để bổ sung tính năng cho Vue ở cấp toàn cục và ko có phạm vi ràng buộc cụ thể nào cho một plugin. Điều đó có nghĩa là chúng ta có thể viết một số kiểu plugin khác nhau như sau:

• Thêm một số phương thức hoặc thuộc tính toàn cục, ví dụ như vue-custom-element
• Thêm một hoặc nhiều directive/filter/transition vân vân, ví dụ như vue-touch
• Thêm tùy chọn cho component thông qua mixin cấp toàn cục, ví dụ như vue-router
• Thêm một số phương thức đối tượng (instance method) bằng cách đính kèm vào Vue.prototype.
• Một thư viện cung cấp API riêng và cùng lúc đó thêm một hoặc vài tính năng được liệt kê trên đây, ví dụ vue-router

Lưu ý một plugin cho Vue nên cung cấp một phương thức install. Phương thức này sẽ được gọi với tham số đầu tiên là hàm dựng Vue, cùng với các tùy chọn khác.

Ví dụ:

MyPlugin.install = function (Vue, options) {
  // 1. Thêm phương thức hoặc thuộc tính cấp toàn cục
  Vue.myGlobalMethod = function () {
  }


  // 2. Thêm một directive cấp toàn cục
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
    }
    ...
  })


  // 3. Thêm một số tùy chọn cho component
  Vue.mixin({
    created: function () {
    }
    ...
  })


  // 4. Thêm một phương thức đối tượng
  Vue.prototype.$myMethod = function (methodOptions) {
  }
}

Sử dụng Plugin trong Vuejs

Vuejs cho chúng ta sử dụng một plugin bằng cách gọi phương thức toàn cục Vue.use():

// dòng code này sẽ gọi `MyPlugin.install(Vue)`
Vue.use(MyPlugin)

Chúng ta  cũng có thể truyền thêm vào một số tùy chọn:

Vue.use(MyPlugin, { someOption: true })

Vue.use tự động ngăn không cho sử dụng một plugin nhiều lần, vì vậy cho dù chúng ta có gọi Vue.use(MyPlugin) mười lần thì MyPlugin cũng sẽ chỉ được cài đặt một lần thôi.

Một số plugin tự động gọi Vue.use() nếu phát hiện thấy biến toàn cục Vue. Tuy nhiên trong một môi trường module, ví dụ như CommonJS, bạn cần phải gọi Vue.use() một cách tường minh:

// Khi dùng CommonJS với Browserify hoặc Webpack…
var Vue = require('vue')
var VueRouter = require('vue-router')


// …đừng quên gọi Vue.use()
Vue.use(VueRouter)

Kết lại:

Trên đây là cách dùng plugin cơ bản trong Vuejs. Bạn có thể tự viết plugin cho riêng mình hoặc có thể tham khảo thêm plugin và thư viện do cộng đồng đóng góp tại Repository awesome-vue . Chúc các bạn học tốt!