پلاگینها - Plugins
مقدمه
پلاگینها کدهای مستقلی هستند که معمولاً عملکردهایی را در سطح برنامه به Vue اضافه می کنند. وقتی از یک پلاگین در برنامه Vue.js استفاده میکنید، کدهایی را اضافه میکنید که عملکرد برنامه شما را با ارائه ویژگیها یا ابزارهای اضافی که میتوان به آنها دسترسی پیدا کرد و در سراسر برنامه استفاده کرد، گسترش میدهد. به روش زیر پلاگین را نصب میکنیم:
js
import { createApp } from 'vue'
const app = createApp({})
app.use(myPlugin, {
/* آپشنهای اختیاری */
})
یک پلاگین یا به عنوان یک آبجکت تعریف میشود که یک متد install()
دارد، یا به سادگی یک تابع است که خودش به عنوان تابع نصب عمل میکند. این تابع میتواند دسترسی به نمونه برنامه اصلی شما داشته باشد و همچنین اگر شما در زمان استفاده از پلاگین (استفاده از app.use()
) آپشنهای اضافی ارائه کرده باشید، این آپشنها را نیز دریافت کند.
js
const myPlugin = {
install(app, options) {
// برنامه را کانفیگ کنید
}
}
مواقع رایجی که استفاده از پلاگینها مفید است عبارتند از:
ثبت یک یا چند کامپوننت سراسری یا دستورات سفارشی با استفاده از
app.component()
وapp.directive()
.ایجاد یک منبع قابل تزریق (injectable) در سراسر برنامه با فراخوانی
app.provide()
.اضافه کردن ویژگیها یا متدهای سراسری با اتصال آنها به
app.config.globalProperties
.کتابخانهای که باید ترکیبی از موارد فوق را انجام دهد (مثلاً vue-router).
نوشتن یک پلاگین
به منظور درک بهتر نحوه ایجاد پلاگینها در Vue.js، ما یک نسخه ساده شده از یک پلاگین را ایجاد خواهیم کرد که رشتههای i18n
(کوتاه شده ی Internationalization یا همان بینالمللیسازی) را نمایش میدهد.
بیایید با آبجکت پلاگین شروع کنیم. توصیه میشود که آن را در یک فایل جداگانه ایجاد کرده و آن را اکسپورت کنید، همانطور که در زیر نشان داده شده است تا منطق کد ایزوله باقی بماند.
js
// plugins/i18n.js
export default {
install: (app, options) => {
// کد پلاگین اینجا نوشته می شود.
}
}
میخواهیم یک تابع ترجمه ایجاد کنیم که یک رشته به عنوان ورودی دریافت کند. این رشته به ما کمک میکند تا مقدار ترجمهشده مرتبط را در گزینههایی که توسط کاربر ارائه شده است جستجو کنیم. این تابع برای استفاده در تمپلیت طراحی شده است.
template
<h1>{{ $translate('greetings.hello') }}</h1>
از آنجایی که این تابع باید به صورت گلوبال در تمام تمپلیتها در دسترس باشد، آن را به app.config.globalProperties
متصل میکنیم:
js
// plugins/i18n.js
export default {
install: (app, options) => {
// به شکل سراسری $translate() تزریق متد
app.config.globalProperties.$translate = (key) => {
// `options` یافتن یک ویژگی تو در تو در
// به عنوان مسیر `key` با استفاده از
return key.split('.').reduce((o, i) => {
if (o) return o[i]
}, options)
}
}
}
تابع $translate
ما یک رشته مانند greetings.hello
را دریافت میکند، در تنظیماتی که توسط کاربر ارائه شده است جستجو میکند و مقدار ترجمهشده را باز میگرداند.
در هنگام نصب پلاگین، باید آبجکت حاوی مقادیر ترجمه شده را به app.use()
منتقل کنیم:
js
import i18nPlugin from './plugins/i18n'
app.use(i18nPlugin, {
greetings: {
hello: 'Bonjour!'
}
})
حالا، عبارت اولیه ما $translate('greetings.hello')
در زمان اجرا با Bonjour!
جایگزین میشود.
مشاهده کنید: افزودن ویژگیهای جهانی
نکته
از پراپرتیهای سراسری با احتیاط استفاده کنید، زیرا اگر تعداد زیادی از پراپرتیهای سراسری توسط پلاگینهای مختلف در سراسر برنامه استفاده شوند، گیج کننده خواهد بود.
ارائه / تزریق پلاگین
افزونهها این امکان را فراهم میکنند که با استفاده از provide
، دسترسی به یک تابع یا ویژگی خاص را در اختیار کاربران افزونه قرار دهیم. برای نمونه، میتوان به برنامه اجازه داد تا به پارامتر options
دسترسی داشته باشد تا بتواند از آبجکت حاوی مقادیر ترجمه شده استفاده کند.
js
// plugins/i18n.js
export default {
install: (app, options) => {
app.provide('i18n', options)
}
}
کاربران پلاگین اکنون می توانند با استفاده از کلید i18n
پراپرتیهای پلاگین را به کامپوننت خود تزریق کنند:
vue
<script setup>
import { inject } from 'vue'
const i18n = inject('i18n')
console.log(i18n.greetings.hello)
</script>
نسخه باندل شده برای NPM
اگر بخواهید پلاگین خود را برای استفاده دیگران بسازید و منتشر کنید، به بخش Vite در حالت کتابخانه مراجعه کنید.