1.需求
我的nuxt项目都是面向插件编程,我会将业务逻辑分开,写成一个一个插件,我觉得这样既看起来简单,在调用时也会很简单,比如订单的业务我会写成order.js,购物车的业务我会写成car.js等等。
目前我的一个需求是给网站添加gtm,我使用了vue的第三方插件,同时我想将该插件再封装成自己的nuxt插件,插件中写各种业务逻辑,那么就遇到了,怎么再自己的nuxt插件中使用刚刚的vue第三方插件
2.引入vue-gtm
该插件引入非常简单,官方文档说明如下:
但是这里出现一个问题,该插件在使用vue.use方法时需要传入参数,而参数中又要使用到router,注意,在nuxt插件中是不能使用this.$router来调用路由对象的,所以我的做法如下:
即使用export default 其中可以使用app这个对象,你可以简单理解成app就是vue对象,其实还是有点区别。nuxt官方文档中也是有export default 的参数中使用app的例子
3.写自己的nuxt插件
插件命名为custom-gtm.js,我的最终写法如下:
import Vue from 'vue';
class GTMEvent {
constructor(gtm) {
this.gtm = gtm
}
register () {
this.gtm.trackEvent({
event: 'register',
category: 'register'
});
}
}
export default ({ app }, inject) => {
inject('gtmCustom', new GTMEvent(Vue.prototype.$gtm))
}
说明:因为我是java开发,所以我喜欢使用class,该插件的作用就是封装了一下第三方的gtm,主要是看下面的export default
我一开始认为app就是vue对象,在第一步加载了vue插件后,app对象中应该就会存在$gtm这个对象,所以我一开始是这么写的
export default ({ app }, inject) => {
inject('gtmCustom', new GTMEvent(app.$gtm))
}
结果打印了一下app,发现app属性中根本没有$gtm,所以我使用了Vue.prototype去尝试获取,就有了
4.注意插件顺序
nuxt.config.js中的插件加载是有顺序的,如果你写在下面的插件调用了写在上面的插件,那么就会报错。所以要注意这点,很重要,脑子短路了的话,可以搞你一天都发现不了这个问题