Plugins ​

Giới Thiệu ​

Các plugin là mã nguồn tự chứa thường thêm chức năng ứng dụng cho Vue. Đây là cách cài đặt một plugin:

import { createApp } from 'vue'

const app = createApp({})

app.use(myPlugin, {
  /* tùy chọn tuỳ chọn */
})

Một plugin được định nghĩa dưới dạng một đối tượng chứa phương thức install(), hoặc đơn giản là một hàm hành như chính nó. Hàm cài đặt nhận đố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) {
    // cấu hình ứng dụng
  }
}

Không có phạm vi được định rõ cho một plugin, nhưng các tình huống thông thường mà các plugin hữu ích bao gồm:

1. Đăng ký một hoặc nhiều thành phần toàn cục hoặc chỉ thị tùy chỉnh với app.component() và app.directive().

2. Làm cho một nguồn lực có thể chèn được trong toàn bộ ứ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 của thể hiện 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).

Viết Một Plugin ​

Để hiểu rõ hơn cách tạo 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. Đề xuất tạo nó trong một tệp riêng lẻ và xuất nó, như được hiển thị dưới đây để giữ mã nguồn ở chỗ và tách biệt.

// plugins/i18n.js
export default {
  install: (app, options) => {
    // Mã plugin điều này ở đây
  }
}

Chúng ta muốn tạo một hàm dịch. Hàm này sẽ nhận một chuỗi key có dạng dấu chấm, chúng ta sẽ sử dụng nó để tra cứu chuỗi đã dịch trong các tùy chọn được người dùng cung cấp. Đây là cách sử dụng dự kiến 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) => {
    // chèn một phương thức $translate() có sẵn toàn cầu
    app.config.globalProperties.$translate = (key) => {
      // lấy một thuộc tính lồng nhau trong `options`
      // sử dụng `key` như là đường dẫn
      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 do người dùng cung cấp và trả về giá trị đã dịch.

Đối tượng chứa các khóa đã 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 ta $translate('greetings.hello') sẽ được thay thế bằng Bonjour! khi chạy.

Xem thêm: Bổ sung Thuộc Tính Toàn Cầu

Cung Cấp / Chèn với Các Plugin ​

Các 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 truy cập 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 của plugin giờ đây sẽ có thể chèn các tùy chọn của 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>

export default {
  inject: ['i18n'],
  created() {
    console.log(this.i18n.greetings.hello)
  }
}