无法读取未定义的属性“$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);
    });
  },
}

那么，我的问题是“如何在插件中监听/捕获事件”？

Answer 1

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

import Vue from 'vue';

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