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

2022-02-25 00:00:00 vue.js nuxt.js vuejs3 nuxtjs3 es6-modules

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

plugins/repos/UserRepository.js(我需要位于/Views/users.vue中)

plugins/repos/PostRepository.js(我需要位于/Views/posts.vue中)

要使用这些插件,我有两个选择:

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

  2. 在各自的VUE组件中手动导入每个回购。

在第一个选项的情况下,我的回购如下所示:

export default (ctx, inject) => {

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

    inject('userRepo', data);
}

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

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

请告诉我处理此问题的最佳方法是什么,因为我有几十个存储库,所以全局注册所有存储库是个好主意?


解决方案

您几乎回答了您的问题。就内存而言,就SPA的加载时间而言,即使只有5%的时间使用,进行本地导入也总比全局导入大量要好。

然后,您始终可以像往常一样访问上下文本身,而不需要插件(又名this.$axios)。这里的阻塞用例是什么?

如果您正在使用Nuxt3,您也可以使用Composables。

相关文章