Nuxt 1.0 插件兼容性写法

前言

Nuxt 1.0 发布之前,写插件用的最多的是直接 Vue.prototype.$xxxx = XXXX,但是这样带来个问题就是不太兼容,只能通过 this 调用。在诸如 asyncData、fetch 这些地方就无法调用了。

后来 Nuxt 发布了 1.0,可以在插件里调用上下文,于是新的插件写法出来了。

正文

下面是插件示例代码:

import Vue from 'vue'

const xxxxPlugin = {
  install () {
    if (Vue.__xxxx_installed__) {
      return
    }
    Vue.__xxxx_installed__ = true /* eslint camelcase: 0 */

    if (!Vue.prototype.hasOwnProperty('$xxxx')) {
      Object.defineProperty(Vue.prototype, '$xxxx', {
        get () {
          return this.$root.$options.$xxxx
        }
      })
    }
  }
}

Vue.use(xxxxPlugin)

export default ctx => {
  const { app, store } = ctx
  const XXXX = {
    // 插件代码
    abc () {
      console.log('abc')
    }
  }

  app.$xxxx = XXXX
  ctx.$xxxx = XXXX

  if (store) {
    store.$xxxx = XXXX
  }
}

使用:

  1. 在 plugins 目录新建一个文件,例如: xxxx.js

  2. 将上面的代码复制到 xxxx.js

  3. 修改 nuxt.config.js 配置文件,在 plugins 数组里加上 '~/plugins/xxxx.js'

调用:

  1. 通过 this 调用:this.$xxxx

  2. 通过上下文的 app 调用:app.$xxxx

  3. 在 store 中调用 store.$xxxxthis.$store.$xxxx

例如:

export default {
  mounted () {
    this.$xxxx.abc() // console: abc
  },
  asyncData ({ app }) {
    app.$xxxx.abc() // console: abc
  }
}

附加 (2017-10-17)

最近看 Nuxt 项目代码的时候发现多了一个新函数 inject,而且还更新了插件示例(with-cookies),示例里使用 inject 将插件注册为了一个 Vue 实例,那么现在写一个插件就方便多了。

根据官方的方法,可以这样写插件:

import Vue from 'vue'

export default ({ app }, inject) => {
  inject('xxxx', new Vue({
    methods: {
      // 插件方法代码
    }
  }))
}

当然,也可以不用 Vue 实例:

export default ({ app }, inject) => {
  inject('xxxx', {
    abc () {
      return 'abc'
    }
  })
}
带符号 * 的表示必填项
  1. 小喵
    小喵

    专业

    回复