了解 NUXT 中的上下文和应用程序方法

Question

我正在尝试在 plugins/axios.js 中使用 bugsnagClient 及其通知方法我在 plugins/bugsnag.js

中有这段代码

import Vue from "vue"
import bugsnag from "@bugsnag/js"
import bugsnagVue from "@bugsnag/plugin-vue"

// const bugsnagClient = bugsnag(`${process.env.BUGSNAG_API_KEY}`)
var bugsnagClient = bugsnag({
  apiKey: "",
  notifyReleaseStages: ["production"]
})

bugsnagClient.use(bugsnagVue, Vue)

我想将方法附加到 app 或 context 作为

export default ({ app }, inject) => {
  function bugsnagNotify(error) {
    return bugsnagClient.notify(new Error(error))
  }
  // Set the function directly on the context.app object
  app.bugsnagNotify = bugsnagNotify
}

我想在plugins/axios.js

中使用它

export default function({ store, app }) {
  if (store.getters.token) {
    console.log(app.bugsnagNotify("ss"))
    app.$axios.setToken(store.getters.token, "Bearer")
  } else {
    //app.$bugsnag.notify(new Error("Bearer tooken is missing in Axios request."))
  }
}

在这个文件中，当我为 app

执行 console.log 时

我能看到bugsnagNotify: ƒ bugsnagNotify(error)

但是当我调用 app.bugsnagNotify("error") 时，我只会收到诸如 VM73165:37 TypeError: app.bugsnagNotify is not a function

之类的错误

我也在plugins/bugsnag.js

中尝试过这个

export default (ctx, inject) => {
  inject('bugsnag', bugsnagClient)
}

我只得到一个错误，因为

app.$bugsnag.notify(new Error("Bearer tooken is missing in Axios request."))

Answer 1

如果您在一个插件中注入上下文并想在另一个插件中使用该函数，您需要确保您注入的插件在 nuxt.config.js

中排在第一位

...
plugins: [
  '~/plugins/bugsnag.js',
  '~/plugins/axios.js'
],
...

了解 NUXT 中的上下文和应用程序方法

Understanding context and app methods in NUXT

vue.js

bugsnag

nuxt.js