پلاگینها - 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!
جایگزین میشود.
مشاهده کنید: افزودن ویژگیهای جهانی
نکته
از پراپرتیهای سراسری با احتیاط استفاده کنید، زیرا اگر تعداد زیادی از پراپرتیهای سراسری توسط پلاگینهای مختلف در سراسر برنامه استفاده شوند، گیج کننده خواهد بود.
ارائه / تزریق پلاگین
پلاگینها در Vue.js انعطافپذیری را برای استفاده از ویژگی inject
ارائه میدهند که به ما امکان میدهد یک عملکرد یا پراپرتی را به کاربران پلاگین ارائه دهیم. به عنوان مثال، ما میتوانیم امکان دسترسی به پارامتر 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 در حالت کتابخانه مراجعه کنید.