VueJS: Plugins

Nuxt.js cho phép bạn xác định các plugin JavaScript sẽ được chạy trước khi khởi tạo Ứng dụng Vue.js gốc. Điều này đặc biệt hữu ích khi sử dụng các thư viện của riêng bạn hoặc các mô-đun bên ngoài.

Gói bên ngoài

Chúng tôi có thể muốn sử dụng các gói / mô-đun bên ngoài trong ứng dụng của mình (một ví dụ tuyệt vời là axios ) để thực hiện yêu cầu HTTP cho cả máy chủ và máy khách.

Đầu tiên, chúng ta nên cài đặt nó qua npm:

npm install --save axios

Sau đó, chúng tôi có thể sử dụng nó trực tiếp trong các thành phần trang của chúng tôi:

<template>
  <h1>{{ title }}</h1>
</template>

<script>
import axios from 'axios'

export default {
  async asyncData ({ params }) {
    let { data } = await axios.get(`https://my-api/posts/${params.id}`)
    return { title: data.title }
  }
}
</script>

Plugin Vue

Nếu chúng tôi muốn sử dụng các plugin Vue, như thông báo vue để hiển thị thông báo trong ứng dụng của mình, chúng tôi cần thiết lập plugin trước khi khởi chạy ứng dụng.

Chúng tôi tạo tập tin plugins/vue-notifications.js:

import Vue from 'vue'
import VueNotifications from 'vue-notifications'

Vue.use(VueNotifications)

Sau đó, chúng tôi thêm đường dẫn tệp bên trong pluginskhóa của chúng tôi nuxt.config.js:

export default {
  plugins: ['~/plugins/vue-notifications']
}

Để tìm hiểu thêm về pluginskhóa cấu hình, hãy kiểm tra các plugin api .

Tiêm trong $ root & bối cảnh

Đôi khi bạn muốn cung cấp các chức năng hoặc giá trị trên ứng dụng. Bạn có thể đưa các biến đó vào các phiên bản Vue (phía máy khách), bối cảnh (phía máy chủ) và thậm chí trong cửa hàng Vuex. Đó là một quy ước để tiền tố các chức năng với a $.

Tiêm vào trường hợp Vue

Việc tiêm bối cảnh vào các phiên bản Vue hoạt động tương tự như khi thực hiện điều này trong các ứng dụng Vue tiêu chuẩn.

plugins/vue-inject.js:

import Vue from 'vue'

Vue.prototype.$myInjectedFunction = (string) => console.log("This is an example", string)

export default {
  plugins: ['~/plugins/vue-inject.js']
}

Bây giờ bạn có thể sử dụng chức năng trong tất cả các thành phần Vue của bạn.

example-component.vue:

export default {
  mounted(){
    this.$myInjectedFunction('test')
  }
}

Tiêm vào bối cảnh

Việc tiêm bối cảnh vào các phiên bản Vue hoạt động tương tự như khi thực hiện điều này trong các ứng dụng Vue tiêu chuẩn.

plugins/ctx-inject.js:

export default ({ app }, inject) => {
  // Set the function directly on the context.app object
  app.myInjectedFunction = (string) => console.log('Okay, another function', string)
}

nuxt.config.js:

export default {
  plugins: ['~/plugins/ctx-inject.js']
}

Chức năng này hiện khả dụng bất cứ khi nào bạn có quyền truy cập vào context(ví dụ như trong asyncDatavà fetch).

ctx-example-component.vue:

export default {
  asyncData(context){
    context.app.myInjectedFunction('ctx!')
  }
}

Kết hợp tiêm

Nếu bạn cần chức năng trong các phiên bản contextVue và thậm chí trong cửa hàng Vuex, bạn có thể sử dụng injectchức năng, đây là tham số thứ hai của chức năng xuất khẩu bổ trợ.

Việc tiêm nội dung vào các phiên bản Vue hoạt động tương tự như khi thực hiện điều này trong các ứng dụng Vue tiêu chuẩn. Các $sẽ được tự động thêm vào phía trước chức năng.

plugins/combined-inject.js:

export default ({ app }, inject) => {
  inject('myInjectedFunction', (string) => console.log('That was easy!', string))
}

nuxt.config.js:

export default {
  plugins: ['~/plugins/combined-inject.js']
}

Bây giờ chức năng có thể được sử dụng từ context, thông qua thistrong các trường hợp Vue và thông qua thistrong cửa hàng actions/ mutations.

ctx-example-component.vue:

export default {
  mounted(){
    this.$myInjectedFunction('works in mounted')
  },
  asyncData(context){
    context.app.$myInjectedFunction('works with context')
  }
}

store/index.js:

export const state = () => ({
  someValue: ''
})

export const mutations = {
  changeSomeValue(state, newValue) {
    this.$myInjectedFunction('accessible in mutations')
    state.someValue = newValue
  }
}

export const actions = {
  setSomeValueToWhatever ({ commit }) {
    this.$myInjectedFunction('accessible in actions')
    const newValue = "whatever"
    commit('changeSomeValue', newValue)
  }
}

Chỉ phía khách hàng

Một số plugin có thể chỉ hoạt động trong trình duyệt vì chúng thiếu hỗ trợ SSR. Trong những tình huống này, bạn có thể sử dụng ssr: falsetùy chọn pluginsđể chỉ thêm plugin ở phía máy khách.

Thí dụ:

export default {
  plugins: [
    { src: '~/plugins/vue-notifications', ssr: false }
  ]
}

import Vue from 'vue'
import VueNotifications from 'vue-notifications'

Vue.use(VueNotifications)

Trong trường hợp bạn cần nhập một số thư viện trong một plugin chỉ ở phía máy chủ , bạn có thể kiểm tra xem process.serverbiến đó có được đặt thành không true.

Ngoài ra, nếu bạn cần biết nếu bạn đang ở trong một ứng dụng được tạo (thông qua nuxt generate), bạn có thể kiểm tra xem có process.staticđược đặt thành không true. Đây chỉ là trường hợp trong và sau thế hệ.

Bạn cũng có thể kết hợp cả hai tùy chọn để đạt điểm khi một trang đang được máy chủ kết xuất nuxt generatetrước khi được lưu ( process.static && process.server).

Lưu ý : Vì Nuxt.js 2.4, modeđã được giới thiệu là tùy chọn pluginschỉ định loại plugin, giá trị có thể là: clienthoặc server. ssr: falsesẽ được điều chỉnh mode: 'client'và không dùng nữa trong phiên bản chính tiếp theo.

Thí dụ:

nuxt.config.js:

export default {
  plugins: [
    { src: '~/plugins/both-sides.js' },
    { src: '~/plugins/client-only.js', mode: 'client' },
    { src: '~/plugins/server-only.js', mode: 'server' }
  ]
}

Tên plugin thông thường

Nếu plugin được coi là chỉ chạy ở phía máy khách hoặc máy chủ .client.jshoặc .server.jscó thể được áp dụng làm phần mở rộng của tệp plugin, thì tệp sẽ được tự động đưa vào phía tương ứng.

Thí dụ:

nuxt.config.js:

export default {
  plugins: [
    '~/plugins/foo.client.js', // only in client side
    '~/plugins/bar.server.js', // only in server side
    '~/plugins/baz.js' // both client & server
  ]
}