Chào mừng đến với Cafedev! Trong không gian lập trình và phát triển web đầy sôi động, có rất nhiều điều mới mẻ để khám phá và học hỏi. Trong bài viết này, chúng ta sẽ khám phá một số chủ đề quan trọng và hữu ích liên quan đến Plugins VueJS, JavaScript, HTML, CSS và nhiều công nghệ web khác. Hãy cùng nhau tìm hiểu, chia sẻ kiến thức và trải nghiệm những điều thú vị trên Cafedev!
Nội dung chính
1.Giới thiệu
Plugin là mã tự chứa thông thường thêm chức năng ở cấp ứng dụng vào Vue. Đây là cách chúng ta cài đặt một plugin:
import { createApp } from 'vue'
const app = createApp({})
app.use(myPlugin, {
/* optional options */
})Một plugin được định nghĩa là một đối tượng mà tiết lộ một phương thức install(), hoặc đơn giản là một hàm hoạt động như chính hàm cài đặt đó. Hàm cài đặt nhận vào đối tượng ứng dụng cùng với các tùy chọn bổ sung được truyền vào app.use(), nếu có:
const myPlugin = {
install(app, options) {
// configure the app
}
}Không có phạm vi được xác định chặt chẽ cho một plugin, nhưng các tình huống phổ biến mà plugin hữu ích bao gồm:
1. Đăng ký một hoặc nhiều thành phần toàn cầu hoặc chỉ thị tùy chỉnh với app.component() và app.directive().
2. Làm cho một tài nguyên có thể tiêm xuyên suốt ứng dụng bằng cách gọi app.provide().
3.Thêm một số thuộc tính hoặc phương thức toàn cầu bằng cách gắn chúng vào app.config.globalProperties.
4.Một thư viện cần thực hiện một số kết hợp của các trường hợp trên (ví dụ: vue-router).
2. Viết một Plugin
Để hiểu rõ hơn về cách tạo các plugin Vue.js của riêng bạn, chúng ta sẽ tạo một phiên bản đơn giản của một plugin hiển thị chuỗi i18n (viết tắt của Internationalization).
Hãy bắt đầu bằng cách thiết lập đối tượng plugin. Đề nghị tạo nó trong một tệp riêng và xuất nó, như được hiển thị dưới đây để giữ logic được chứa và phân biệt.
// plugins/i18n.js
export default {
install: (app, options) => {
// Plugin code goes here
}
}Chúng ta muốn tạo một hàm dịch. Hàm này sẽ nhận vào một chuỗi key được ngăn cách bằng dấu chấm, mà chúng ta sẽ sử dụng để tìm chuỗi dịch trong các tùy chọn được cung cấp bởi người dùng. Đây là cách sử dụng dự định trong các mẫu:
<h1>{{ $translate('greetings.hello') }}</h1>Vì hàm này nên có sẵn toàn cầu trong tất cả các mẫu, chúng ta sẽ làm như vậy bằng cách gắn nó vào app.config.globalProperties trong plugin của chúng ta:
// plugins/i18n.js
export default {
install: (app, options) => {
// inject a globally available $translate() method
app.config.globalProperties.$translate = (key) => {
// retrieve a nested property in `options`
// using `key` as the path
return key.split('.').reduce((o, i) => {
if (o) return o[i]
}, options)
}
}
}Hàm $translate của chúng ta sẽ nhận một chuỗi như greetings.hello, tìm kiếm trong cấu hình được cung cấp bởi người dùng và trả về giá trị đã được dịch.
Đối tượng chứa các khóa đã được dịch nên được truyền vào plugin trong quá trình cài đặt thông qua các tham số bổ sung cho app.use():
import i18nPlugin from './plugins/i18n'
app.use(i18nPlugin, {
greetings: {
hello: 'Bonjour!'
}
})Bây giờ, biểu thức ban đầu của chúng tôi $translate('greetings.hello') sẽ được thay thế bằng Bonjour! khi chạy.
Xem thêm: Mở rộng Thuộc tính Toàn cầu
Mẹo Sử dụng thuộc tính toàn cầu một cách ít ỏi, vì nó có thể nhanh chóng trở nên nhầm lẫn nếu quá nhiều thuộc tính toàn cầu được tiêm bởi các plugin khác nhau được sử dụng trong toàn bộ ứng dụng.
2.1 Cung cấp / Tiêm vào với Plugin
Plugin cũng cho phép chúng ta sử dụng inject để cung cấp một hàm hoặc thuộc tính cho người dùng của plugin. Ví dụ, chúng ta có thể cho phép ứng dụng có quyền truy cập vào tham số options để có thể sử dụng đối tượng dịch.
// plugins/i18n.js
export default {
install: (app, options) => {
app.provide('i18n', options)
}
}Người dùng plugin bây giờ sẽ có thể tiêm các tùy chọn plugin vào các thành phần của họ bằng cách sử dụng khóa i18n:
<script setup>
import { inject } from 'vue'
const i18n = inject('i18n')
console.log(i18n.greetings.hello)
</script>Như vậy, chúng ta đã khám phá qua một số kiến thức thú vị và hữu ích trên Cafedev. Hy vọng rằng những thông tin và hướng dẫn mà chúng tôi chia sẻ sẽ giúp bạn hiểu rõ hơn về Plugins và cải thiện kỹ năng lập trình của mình. Đừng ngần ngại tiếp tục đón đọc và tham gia cùng chúng tôi trên Cafedev để cùng nhau phát triển và chia sẻ kiến thức trong cộng đồng lập trình viên và những người yêu thích công nghệ.
Tham khảo thêm: MIỄN PHÍ 100% | Series tự học Vuejs từ cơ bản tới nâng cao
Các nguồn kiến thức MIỄN PHÍ VÔ GIÁ từ cafedev tại đây
Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của CafeDev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
