vue.js - 了解 NUXT 中的上下文和应用程序方法

Question

我正在尝试使用 bugsnagClient 及其通知方法，plugins/axios.js我有此代码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."))
  }
}

在这个文件中，当我做 console.log 只是app

我可以看到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'
],
...