注册全局组件,可以使得项目的各个页面或者组件中可以去访问他们,注册组件包括以下几种。
1. 注册Vue插件
例如想用vue-notifications组件来显示通知的话,那我们需要先配置好这个组件。
首先需要新增一个文件 plugins/vue-notifications.js(在专门放插件的plugins文件夹中)
:
import Vue from 'vue'
import VueNotifications from 'vue-notifications'
Vue.use(VueNotifications)
然后在nuxt.config.js中再配置
module.exports = {
plugins: ['~/plugins/vue-notifications']
}
这样就完成了注册全局组件。然后就可以使用vue-notifications插件了(具体使用方式可以参考Usage):
export default {
name: 'DemoView',
data () {
//...
},
methods: {
//...
},
notifications: {
showLoginError: { // You can have any name you want instead of 'showLoginError'
title: 'Login Failed',
message: 'Failed to authenticate',
type: 'error' // You also can use 'VueNotifications.types.error' instead of 'error'
}
}
}
2.注册全局函数
NUXT支持注册全局函数,从而在整个应用程序中使用这个函数。有三种注入方式:
- 注入到Vue实例(客户端)
- context(服务器端)
- Vuex
在Nuxt.js中使用前缀$
为这些函数添加注入。
1)注入Vue实例,所有组件内都可以访问,但是不包含服务器端
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组件中使用该函数了。
example-component.vue
:
export default {
mounted(){
this.$myInjectedFunction('test')
}
}
2)注入context
context注入方式和在其它vue应用程序中注入类似。
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']
}
现在,只要您获得context,你就可以使用该函数(例如在asyncData
和fetch
中)。 ctx-example-component.vue
:
export default {
asyncData(context){
context.app.myInjectedFunction('ctx!')
}
}
3)同时注入context
,Vue
实例,甚至Vuex
可以使用inject
方法,它是plugin导出函数的第二个参数。 将内容注入Vue实例的方式与在Vue应用程序中进行注入类似。系统会自动将$
添加到方法名的前面。
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']
}
现在就可以在context
,或者Vue
实例中的this
,或者Vuex
的actions/mutations
方法中的this
来调用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的系统,插件只在浏览器里使用,这种情况下下,你可以用ssr: false 这样插件只会在客户端运行。
例如:nuxt.config.js
:
module.exports = {
plugins: [
{ src: '~/plugins/vue-notifications', ssr: false }
]
}
其他变量的使用:
process.server:当值为
true
表示是当前执行环境为服务器中process.static:为
true
来判断应用是否通过nuxt generator
生成process.client:当值为
true
表示是当前执行环境为客户端中
注意:由于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' }
]
}