在Nuxt插件中访问Vue实例

Question

我创建了一个 nuxt 插件来使用 simple-jsonrpc-js 包以及nuxt auth 插件。现在我可以使用 this.$jsonApi.call() 访问它，以使用 nuxt/auth 提供的令牌向服务器执行请求。

我在 nuxt 应用程序的许多组件中使用它，因此我想通过将 _jrpc.call() 包装在 try-catch 块中来为我的插件创建一个错误处理程序。因为我使用 Vuetify 我想显示一个包含错误消息内容的小吃栏组件。目前我的代码如下所示：

async call<T = Response<any>>(method: string, data: object = {}): Promise<T> {
    const token = this.accessTokenFactory()
    try {
        return await this._jrpc.call(method, {
            token: token,
            data
        })
    } catch (e:any) {
        const ComponentClass = Vue.extend(VSnackbar)
        const instance = new ComponentClass()
        instance.$slots.default = [e.message]
        instance.$mount()
        document.querySelector('body')?.appendChild(instance.$el)
    }
}

但是当我从 api 收到错误时，我从 catch 块

来自 vuetify 组件代码：

const {
  bar,
  bottom,
  footer,
  insetFooter,
  left,
  right,
  top,
} = this.$vuetify.application

我的猜测是我的 Vue 实例使用不有 this.$vuetify.application 因为它与 nuxt 应用程序使用的 Vue 实例不同...

这就是为什么我问：在注入 a 时如何访问 Nuxt 中的相同 Vue 实例插件？ Nuxt 文档没有帮助，我还没有找到类似的问题。

预先感谢您的帮助

Answer 1

刚刚找到了这个问题的答案！我也已经尝试寻找这个有一段时间了。

您可以从客户端通过 window.$nuxt 访问 Nuxt 使用的根 Vue 实例（与 Vue 组件内的 this.$root 相同）。

对于您的代码，请在调用代码上使用 window.$nuxt.$vuetify.application 。

注意：如果您在插件创建本身上使用此功能，请确保首先通过执行 setTimeout、挂钩模块或添加组件事件来等待 Nuxt 实例创建，因为 Nuxt 实例尚未创建尚未创建。

编辑：修正了句子措辞并添加了一些见解。

Answer 2

目前我还没有找到解决方案，但在本文中找到了替代方案

如何使用 Nuxt、Vuetify 和 Vuex 创建全局小吃栏。

恕我直言，自从监听组件以来，这并不像插件那样“干净”位于 /layouts/default 而不是 nuxt/vue 上下文中，因此需要将其添加到所有布局中才能工作。

我想解决方法是“基本”布局，所有其他布局都需要从中继承