第四章 插件 Plugin

Nuxt.js允许您在运行Vue.js应用程序之前执行js插件。这在您需要使用自己的库或第三方模块时特别有用。
可以将自定义插件注入到 Vue 实例（客户端），context（服务器端）、store(Vuex)。
新增的属性或方法名使用$ 作为前缀。

注入 Vue 实例

将内容注入Vue实例，避免重复引入，在Vue原型上挂载注入一个函数，所有组件内都可以访问(不包含服务器端)。
plugins/vue-inject.js：

import Vue from 'vue'

Vue.prototype.$myVueFunction = (string) => {
  console.log('绑定到Vue实例的方法参数', string)
}

nuxt.config.js

plugins: ['~/plugins/vue-inject.js'],

这样，您就可以在所有Vue组件中使用该函数。

mounted() {
    this.$myVueFunction('mounted')
},

注入 context

context注入方式和在其它vue应用程序中注入类似。
plugins/ctx-inject.js :

export default ({ app }, inject) => {
  app.myContextFunction = (string) => {
    console.log('绑定到Vue实例的方法参数', string)
  }
}

plugins: ['~/plugins/vue-inject.js', '~/plugins/ctx-inject.js'],

现在，只要您获得context，你就可以使用该函数

asyncData(context) {
    context.app.myContextFunction('asyncData')
},

注入 context ，Vue ， Vuex 实例

export default ({ app }, inject) => {
  inject('myAllFunction', (string) => {
    console.log('绑定到Vue实例的方法参数', 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' }, // 插件只会在服务端运行。
  ],