无法读取未定义的属性“$nuxt”

Question

我正在处理 nuxt.js 项目并在尝试从插件访问事件时遇到错误 Cannot read property '$nuxt' of undefined。

在~/plugins/myPlugin.js

import Vue from 'vue';

this.$nuxt.$on('emit-height', (payload) => {
  Vue.prototype.$bannerHeight = payload;
});

在 ~/plugins/nuxt.config.js

中导入

plugins: [
  '~/plugins/get-main-banner-height.js',
]

this.$nuxt.$on 如果我在任何组件中使用它都有效，但如上所述在插件中不起作用。

在我的组件中，我发出了高度。

methods: {
  getMainBannerHeight() {
    this.$nextTick(() => {
      this.$nuxt.$emit('emit-main-banner-height', this.bannerHeight);
    });
  },
}

那么，我的问题是 "How to listen/capture event in plugins"?

Answer 1

您可以在nuxt插件的上下文中引用app。文档 https://nuxtjs.org/api/context/

import Vue from 'vue';

export default ({ app }) => {
  app.$on('emit-height', (payload) => {
    Vue.prototype.$bannerHeight = payload;
  });
}

Cannot read property '$nuxt' of undefined