配置插件
plugins\all-inject.js
/**
* inject 同时将方法注入到context和vue实例和store中
*/
export default (context, inject) => {
// 第一个参数是注入的名称
inject('myAllFunction', string => console.log(string))
}
nuxt.config.js
export default {
...
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
"./plugins/vue-inject.js",
"./plugins/all-inject.js",
],
...
}
使用插件
pages\plugins\plugin-all.vue
<template>
<div>
</div>
</template>
<script>
export default {
/**
* 服务端(Nuxt)
*/
asyncData ({app}) {
app.$myAllFunction('asyncData:五黑犬')
},
/**
* 客户端(Vue)
*/
mounted () {
this.$myAllFunction('mounted:二哈')
}
};
</script>
<style lang="scss" scoped>
</style>
只在客户端使用的插件
nuxt.config.js
export default {
...
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
"./plugins/vue-inject.js",
"./plugins/ctx-inject.js",
// "./plugins/all-inject.js",
// {src: "./plugins/all-inject.js", mode: "client"}, // 插件只会在客户端运行
// {src: "./plugins/all-inject.js", mode: "server"}, // 插件只会在服务端运行
],
...
}