Nuxt.js Plugins 的应用

紧要

先贴一张官方插件说明：

意思这3种场景必须注册到 next.config.js 中的 plugins 中。因图片是英文的，下面列举vue 的使用与 nuxt.js 作为演示。给图片存在疑惑或者英文水平差一点的同学（包含我）一点思路和理解。

第一种：需要全局注册常量到 Vue原型链中。

	//Vue.js 注册方式 
	// main.js
	Vue.prototype.$hello = "Hello World!";
	
	// nuxt.js 注册方式 
	// /plugins/test.js
	export default ({ redirect }, inject) => {		
	 // 第一个参数则是全局注册字段，不需要带$， 第二个则是注册的值，可以为基本类型及函数
		 inject('hello', "Hello World!")
	});
	// 使用
	// /pages/index.vue
	async asyncData ({ $hello }) {
		 console.log($hello) // Hello World!
	},
	mountd() {
		 console.log(this.$hello) // Hello World!
	}

第二种：需要注册到Vue 插件的。

	//Vue.js 注册方式 
	// main.js
	import Vue from 'vue';
    import VueBus from 'vue-bus';
	Vue.use(VueBus)
	
	// nuxt.js 注册方式 
	// /plugins/vuebus.js
	import Vue from 'vue';
    import VueBus from 'vue-bus';
	Vue.use(VueBus)
	
	// 细心的小伙伴应该发现了， 因为nuxt.js 是做了一层封装，
	//并且是服务端渲染。插件注册到 nuxt.config.js 中的 plugins是为了，让我们获取到 Vue 实例。
	// 请勿在plugins 以外使用 Vue.use 及Vue.component ，因为将可能引起内存泄漏。

第三种：Nuxt.js 库或模块如@nuxtjs/axios

	// /plugins/axios.js
	export default (app) => {
			... // app 是全局实例，你可以获取到请求参数，及全局定义的插件引用
			app.$axios.onError(err => {
				if(err.response.status === 403) {
					app.redirect('/login')  // 设置拦截器， 重定向	
				}
			})
			...
	});
	
	// nuxt.config.js
	...
	  modules: ['@nuxtjs/axios'],
	  plugins: ['~/plugins/axios.js']
	...

使用@nuxtjs/axios ，无需单独注册绑定进vue 原型链，它会帮你操作。只需要以上代码即可。如果你不设置拦截器，则只需设置modules。@nuxtjs/axios 项目使用方式参考第一种 plugins的使用。

想要了解更多 ?
@nuxtjs/axios Click Me
Nuxt.js Plugins Click Me