Nuxt.js 插件

2020-02-13 17:12 更新
Nuxt.js允許您在運行Vue.js應(yīng)用程序之前執(zhí)行js插件。這在您需要使用自己的庫或第三方模塊時特別有用。

需要注意的是,在任何 Vue 組件的生命周期內(nèi), 只有 beforeCreate 和 created 這兩個方法會在 客戶端和服務(wù)端被調(diào)用。其他生命周期函數(shù)僅在客戶端被調(diào)用。

使用第三方模塊

我們可以在應(yīng)用中使用第三方模塊,一個典型的例子是在客戶端和服務(wù)端使用 axios 做 HTTP 請求。

首先我們需要安裝 npm 包:

npm install --save axios

然后,在頁面內(nè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>

使用 Vue 插件

假如我們想使用 vue-notifications 顯示應(yīng)用的通知信息,我們需要在程序運行前配置好這個插件。

首先增加文件 plugins/vue-notifications.js:

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

Vue.use(VueNotifications)

然后, 在 nuxt.config.js 內(nèi)配置 plugins 如下:

module.exports = {
  plugins: ['~/plugins/vue-notifications']
}

想了解更多關(guān)于 plugins 的配置,請參考 插件 API 文檔

ES6 插件

如果插件位于node_modules并導(dǎo)出模塊,需要將其添加到transpile構(gòu)建選項:

module.exports = {
  build: {
    transpile: ['vue-notifications']
  }
}

您可以參考 構(gòu)建配置 文檔來獲取更多構(gòu)建選項。

注入 $root 和 context

有時您希望在整個應(yīng)用程序中使用某個函數(shù)或?qū)傩灾?,此時,你需要將它們注入到Vue實例(客戶端),context(服務(wù)器端)甚至 store(Vuex)。按照慣例,新增的屬性或方法名使用$作為前綴。

注入 Vue 實例

將內(nèi)容注入Vue實例,避免重復(fù)引入,在Vue原型上掛載注入一個函數(shù),所有組件內(nèi)都可以訪問(不包含服務(wù)器端)。

plugins/vue-inject.js:

import Vue from 'vue'

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

nuxt.config.js:

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

這樣,您就可以在所有Vue組件中使用該函數(shù)。

example-component.vue:

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

注入 context

context注入方式和在其它vue應(yīng)用程序中注入類似。

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']
}

現(xiàn)在,只要您獲得context,你就可以使用該函數(shù)(例如在asyncData和fetch中)。 ctx-example-component.vue:

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

同時注入

如果您需要同時在context,Vue實例,甚至Vuex中同時注入,您可以使用inject方法,它是plugin導(dǎo)出函數(shù)的第二個參數(shù)。 將內(nèi)容注入Vue實例的方式與在Vue應(yīng)用程序中進行注入類似。系統(tǒ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']
}

現(xiàn)在您就可以在context,或者Vue實例中的this,或者Vuex的actions/mutations方法中的this來調(diào)用myInjectedFunction方法。 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)
  }
}

只在客戶端使用的插件

不支持ssr的系統(tǒng),插件只在瀏覽器里使用,這種情況下下,你可以用 ssr: false ,使得插件只會在客戶端運行。

舉個例子:

nuxt.config.js:

module.exports = {
  plugins: [
    { src: '~/plugins/vue-notifications', ssr: false }
  ]
}

plugins/vue-notifications.js:

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

Vue.use(VueNotifications)

您可以通過檢測process.server這個變量來控制插件中的某些腳本庫只在服務(wù)端使用。當(dāng)值為 true 表示是當(dāng)前執(zhí)行環(huán)境為服務(wù)器中。 此外,可以通過檢查process.static是否為true來判斷應(yīng)用是否通過nuxt generator生成。您也可以組合process.server和process.static這兩個選項,確定當(dāng)前狀態(tài)為服務(wù)器端渲染且使用nuxt generate命令運行。

注意:由于Nuxt.js 2.4,模式已被引入作為插件的選項來指定插件類型,可能的值是:client 或 server, ssr:false 在下一個主要版本中棄用,將過渡為 mode: 'client'。

例子:

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ǒng)命名插件

如果假設(shè)插件僅在 客戶端 或 服務(wù)器端 運行,則 .client.js 或 .server.js可以作為插件文件的擴展名應(yīng)用,該文件將自動包含在相應(yīng)客戶端或者服務(wù)端上。

例子:

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
  ]
}


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號