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