NUXT 注册全局组件

注册全局组件，可以使得项目的各个页面或者组件中可以去访问他们，注册组件包括以下几种。

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