در این قسمت از دوره، ابتدا می خواهیم پلاگین ها را به صورت ساده توضیح داده و سپس نحوه ساخت، ایجاد و استفاده از یک پلاگین را آموزش دهیم. برای گذراندن این قسمت از دوره باید حتما قسمت های قبلی را خوانده و حداقل تجربه کار با جاوا اسکریپت را داشته باشید.
پلاگین در Vue.js چیست و دقیقا چه کاربردی دارد:
پلاگین ها شما را قادر می سازند تا بتوانید توابع یا پکیج هایی به صورت global به Vue.js اضافه کنید. راه بسیار خوبی برای خوانا و کوچک نگه داشتن کامپوننت های Vue.js می باشد.
همچنین با استفاده از پلاگین ها می توان کدها را به صورت پکیج در آورد و آن ها را با دیگران به اشتراک گذاشت.
به عبارت ساده تر، پلاگین ها چیزی جز یک آبجکت نیستند با این تفاوت که این آبجکت حاوی یک متد install می باشد.
نحوه نوشتن و استفاده از یک پلاگین:
در ابتدا برای نوشتن یک پلاگین باید object مربوطه را export کنیم. با این کار میتوان از این plugin در همه جای پروژه استفاده کرد.
در ادامه باید از متد install استفاده کرد که این متد 2 پارامتر می گیرد. اولین پارامتر Vue Constructor بوده و دومین پارامتر مربوط به option های پلاگین می باشد که به صورت object قرار می گیرید.
// plugin.js
// This exports the plugin object.
export default {
// The install method will be called with the Vue constructor as
// the first argument, along with possible options
install (Vue, options) {
}
}
اما سوالی که اینجا پیش می آید این است که این option را کجا و چگونه باید به این پلاگین داد؟
جواب: از آنجایی که باید هنگام استفاده از پلاگین، در فایل main.js خود، فایل مربوط به پلاگین (که در این مثال plugin.js است) را نیز import کنیم، با استفاده از متد ()use و پاس دادن اسم مربوط به پلاگین به همراه option مورد نظر، می توان از این پلاگین با option های اختصاص داده شده، استفاده نمود.
// main.js
import Vue from 'vue'
import yourPlugin from './plugin.js'
// Without options
Vue.use(yourPlugin)
// With options
Vue.use(yourPlugin, {
someOption: true
})
new Vue({
el: '#app',
render: h => h(App)
})
متد install می تواند شامل یک یا چند مورد زیر باشد:
- می توان تعدادی متد و property به صورت global در متد install تعریف کرد.
- می توان چند filter, transition و حتی directive نیز در این متد تعریف کرد.
- می توان تعدادی متد global به صورت mixin تعریف کرد.
- می توان تعدادی instance به صورت ترکیب شده با Vue.prototype تعریف کرد.
*توجه: در قسمت قبلی به طور کامل درباره mixin ها توضیح داده شد، اما به صورت مختصر دوباره mixin در Vue.js را توضیح می دهیم:
mixin ها روشی منعطف برای تعریف متدها و توابعی هستند که می توان از آن ها چندین بار در تمام پروژه استفاده کرد. یک mixin می تواند شامل هر پارامتری از یک کامپوننت، به جز template، باشد. هر کامپوننتی که از یک mixin استفاده کند، تمامی property های تعریف شده در mixin با property های آن کامپوننت ترکیب و ادغام می شوند.
مثال: (تمامی موارد گفته شده در بالا را به صورت ساده در این مثال استفاده کرده ایم)
// plugin.js
import Component from '/src/components/Component.vue'
// This exports the plugin object.
export default {
// The install method will be called with the Vue constructor as
// the first argument, along with possible options
install (Vue, options) {
// Add or modify global methods or properties.
Vue.yourMethod = (value) => value
// Add a component or directive to your plugin, so it will be installed globally to your project.
Vue.component('component', Component)
// Add `Vue.mixin()` to inject options to all components.
Vue.mixin({
// Add component lifecycle hooks or properties.
mounted() {
console.log('Hello from created hook!')
}
})
// Add Vue instance methods by attaching them to Vue.prototype.
Vue.prototype.$myProperty = 'This is a Vue instance property.'
}
}
برای درک بهتر پلاگین ها می توانید به عنوان تمرین در پروژه خودتان تعدادی پلاگین بسازید و از آن ها در موارد مختلفی استفاده کنید. همچنین پلاگین هایی که برای Vue.js ساخته شده و معتبر هستند را نیز می توانید به کار ببرید.
منابع:
https://dev.to/nkoik/writing-a-very-simple-plugin-in-vuejs---example-8g8
