vue 分离文件中的依赖注入答案

【问题标题】：Dependency injection in separated files of vuevue 分离文件中的依赖注入
【发布时间】：2018-12-20 23:02:13
【问题描述】：

我在我的项目中使用Vue。一开始一切似乎都很好，因为我之前对Angular有所了解。

现在，我正在尝试在我的 Vue 应用程序中实现 DI。我创建了一个名为 user.service.vue 的文件：

<script>
    export default {
        name: '$user',
        provide: {
            getUser: function(){
                console.log('Hello world');
                console.log(this.$http);
            }
        }
    }
</script>

我正在尝试将$user 注入我的App.vue，如下所示：

<script>
    import NavigationBar from './components/shared/navigation-bar';
    import UserService from './services/user.service';

    export default {
        components: {
            NavigationBar
        },
        inject: ['$user'],
        mounted(){
            console.log(this.$user);
        }
    }
</script>

当我运行应用程序时，出现一条错误消息：

vue.runtime.esm.js?2b0e:587 [Vue 警告]：找不到注入“$user”

如何将分离的服务文件注入我的Vue 应用程序？

谢谢，

更新 1

即使将我的user.service.vue 更改为：

<script>
    export default {
        provide: {
            '$user': 'Hello world'
        }
    }
</script>

我还是有同样的问题。

但是当我将App.vue 更改为：

export default {
        components: {
            NavigationBar
        },
        provide: {
            '$user': 'From app'
        }
    }

并创建一个组件，它是 App 的子组件：（例如称为 user-dashboard.vue）

export default {
        name: 'user-dashboard',
        inject: ['$user'],
        data() {
            return {
                users: []
            }
        },
        mounted() {
            console.log(this.$user);
        }
    }

当我运行应用程序时，我在控制台中收到消息：From app。

我的想法是：$user 服务必须由App.vue 提供才能注入其子代。

但是在我的应用程序中，我可以有很多服务，例如：user.service、customer.service、...因此，我不能在我的 App.vue 中声明所有内容。很难维护和修复错误。

请问有什么解决办法吗？

【问题讨论】：

你声明getUser并注入$user。只需提供user 并注入user。但是请记住，您的属性不是反应性的。如果您希望它们具有反应性，您需要使用 Object.define() 和 enumerable: true 以及映射到反应性对象/属性的 getter。
fyi "provide 和 injection 主要用于高级插件/组件库用例。不建议在通用应用程序代码中使用它们。"
我觉得这更像是一个评论而不是一个答案，但我最终得到了同样的问题，或者它的一种形式。我不知道您当前是否正在使用 Typescript（我强烈建议您这样做，基于类的 Js 是一种祝福），但是对于我的服务注入/提供解决方案，我目前正在研究 Js InversifyJs 的 IoC 容器。遗憾的是，您需要打字稿，但对于您的一般问题，我认为您可能正在寻找的是 Js 的 IoC 容器的使用。
最后一点，我建议使用 .js 文件或 .ts（Typescript）将服务代码与实际的 vue 组件（或 .vue 文件）分开。除非您的服务需要 Html 或 Css，否则您应该没问题。（如果您的服务需要 html 或 css，我建议编写一个组件来注入服务）

标签： vue.js vuejs2 vue-component

【解决方案1】：

直接在脚本中使用服务有什么问题？

见下文：

<script>
    import NavigationBar from './components/shared/navigation-bar';
    import UserService from './services/user.service';

    export default {
        components: {
            NavigationBar
        },
        mounted(){
            UserService.someMethod().then((response) => {
                console.log(response);
            })
        }
    }
</script>

【讨论】：

如果我更改 UserService 的实现会怎样？例如，一个接口 IUserService 具有 2 个不同的实现：NormalUserService, AdvancedUserService ?