注册Nuxt插件:全局与手动导入
我创建了两个存储库作为我放置API调用的插件。
plugins/repos/UserRepository.js(我需要位于/Views/users.vue中)
plugins/repos/PostRepository.js(我需要位于/Views/posts.vue中)
要使用这些插件,我有两个选择:
通过在nuxt.config.js的plugins数组中列出这些插件来全局注册它们
在各自的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。
相关文章