注册 Nuxt 插件：全局与手动导入

Posted 2023-02-22

【中文标题】注册 Nuxt 插件：全局与手动导入

【英文标题】：Registering Nuxt Plugins: Globally vs Manual Import

【发布时间】：2022-01-08 02:12:08

【问题描述】：

我创建了两个存储库作为我放置 API 调用的插件。

plugins/repos/UserRepository.js（我需要在 /views/users.vue 中）

plugins/repos/PostRepository.js（我需要在 /views/posts.vue 中）

要使用这些插件，我有两个选择：

通过在 nuxt.config.js 的 plugins 数组中列出这些插件来全局注册这些插件

在各自的 vue 组件中手动导入每个 repo。

在第一个选项的情况下，我的回购看起来像这样：

export default (ctx, inject) => 

const data=
        getAll()
            return context.$axios
            .$get("/users");
        
    

    inject('userRepo', data);

第一种方法的主要优点是我可以访问上下文。但是如果我在我的组件中手动导入它（第二种方法），那么我需要在插件中手动传递上下文。

但第一种方法的主要缺点是它使插件普遍可用。 所以我的主要问题是：第一个在内存消耗方面是一种不好的方法，因为我不需要 users.vue 中的 PostRepository 但它仍然由 Nuxt 自动导入，因为我在 plugins 数组中提到了它nuxt.config.js？

请告诉我处理此问题的最佳方法是什么，因为我有数十个存储库，因此在全球范围内注册所有这些存储库是个好主意？

【参考方案1】：

您几乎回答了自己的问题。在内存方面以及 SPA 的加载时间方面，即使您只使用 5% 的时间，最好进行本地导入而不是全局导入。

然后，您始终可以像往常一样自行访问上下文，而无需插件 aka this.$axios。这里的阻塞用例是什么？

如果您正在使用 Nuxt3，您还可以使用可组合。

【讨论】：

没有阻塞，我唯一担心的是如果我手动导入它，我无法访问存储库中的上下文（this.$axios）。在这种情况下，我需要从我使用 repo 的位置显式传递上下文。

@habib 取决于你实际导入它的位置，如果它在.vue 文件中，如果你使用axios nuxt module，你应该是gucci。如果它在常规的.js 文件中，我想你可以使用常规的 axios。

我正在将它导入到 vue 文件中。顺便说一句，这里的 gucci 是什么意思？

@habib 我不确定为什么您无法在组件中访问this.$axios，但如果您查看usage page，您完全可以在那里使用它。您是否正确安装了模块？如果你这样做了，你将可以访问它。

@habib 如果它不在.vue 文件中，也不在vuex 文件中，只是一个常规的API 模型JS 文件，那么您应该在您的JS 文件中使用regular axios。实际上，this.$axios 将与 Vue/Nuxt 上下文一起使用。如果你摆脱它，使用 nuxt 模块没有意义。