第四章 插件 Plugin
Nuxt.js允許您在運行Vue.js應(yīng)用程序之前執(zhí)行js插件。這在您需要使用自己的庫或第三方模塊時特別有用疏叨。
可以將自定義插件注入到 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.$myVueFunction = (string) => {
console.log('綁定到Vue實例的方法參數(shù)', string)
}
nuxt.config.js
plugins: ['~/plugins/vue-inject.js'],
這樣村视，您就可以在所有Vue組件中使用該函數(shù)官套。
mounted() {
this.$myVueFunction('mounted')
},
注入 context
context注入方式和在其它vue應(yīng)用程序中注入類似。
plugins/ctx-inject.js :
export default ({ app }, inject) => {
app.myContextFunction = (string) => {
console.log('綁定到Vue實例的方法參數(shù)', string)
}
}
plugins: ['~/plugins/vue-inject.js', '~/plugins/ctx-inject.js'],
現(xiàn)在蚁孔，只要您獲得context奶赔，你就可以使用該函數(shù)
asyncData(context) {
context.app.myContextFunction('asyncData')
},
注入 context ，Vue 杠氢， Vuex 實例
export default ({ app }, inject) => {
inject('myAllFunction', (string) => {
console.log('綁定到Vue實例的方法參數(shù)', string)
})
}
nuxt.config.js :
plugins: [
'~/plugins/vue-inject.js',
'~/plugins/ctx-inject.js',
'~/plugins/all-inject.js',
],
mounted() {
this.$myVueFunction('mounted')
this.$myAllFunction('mounted')
},
asyncData(context) {
context.app.myContextFunction('asyncData')
context.app.$myAllFunction('asyncData')
},
image.png
只在客戶端使用的插件
plugins: [
{ src: '~/plugins/combined-inject.js' },
{ src: '~/plugins/combined-inject.js', mode: 'client' }, // 插件只會在客戶端運行站刑。
{ src: '~/plugins/combined-inject.js', mode: 'server' }, // 插件只會在服務(wù)端運行。
],
