未找到 Nuxt 注入

Question

向 Nuxt 实例注入记录器时我做错了什么？

loglevel.client.js

import log from 'loglevel';

log.setLevel(process.env.LOG_LEVEL || 'debug');

export default ({ app }, inject) => {
  inject('log', log);
  log.debug('logger set up')
}

nuxt.config.js

  plugins: [
    '~/plugins/loglevel.client.js',
    '~/plugins/api.js',
  ],

plugins\api.js

if (process.client) {
  console.log('on client console')
  this.$log.error('on client $log')
}

浏览器：

api.js?e568:4 on client console
08:22:26.456 api.js?e568:5 Uncaught TypeError: Cannot read properties of undefined (reading '$log')
    at eval (api.js?e568:5:1)
    at Module../plugins/api.js (app.js:1033:1)

Answer 1

inject 通过将 $log 作为属性附加到根 Vue 应用程序和 Nuxt 上下文，使 $log 在其他地方可用。

插件是运行在根 Vue 应用实例化之前——你不能通过 this.$log 访问 $log，除非 this 引用根 Vue 应用实例（就像在组件中一样）。

相反，您必须通过 Nuxt 上下文访问 $log，它可以方便地用作 api.js 插件的第一个参数。

export default ({ $log }) => {
  if (process.client) {
    console.log('on client console')
    $log.error('on client $log')
  }
}

来自docs:

The (Nuxt) context provides additional objects/params from Nuxt to Vue components and is available in special nuxt lifecycle areas like asyncData , fetch , plugins , middleware and nuxtServerInit.

此外，loglevel 似乎已注册为 client-side 插件 (loglevel.client.js)。该代码不会运行服务器端 — 因此您不必在 process.client.

中包装任何内容

未找到 Nuxt 注入

Nuxt injection not found

vue.js

nuxt.js