【问题标题】：How do I pass a dependency to a Vue component?如何将依赖项传递给 Vue 组件？
【发布时间】：2019-07-26 08:01:41
【问题描述】：

我有一个类旨在用作使用 axios 发出 AJAX 请求的存储库：

export default class SomeRepository {
  getEncryptedValue (value) {
    return axios.get('http://localhost/api/v1/encrypt')
  }
}

我有一个组件在组件的methods 属性内调用此存储库的方法，如下所示：

<template>
  ...
</template>

<script>
import SomeRepository from '@/classes/SomeRepository'

export default {
  data () {
    return {
      value: '',
      result: ''
    }
  },
  methods: {
    encrypt () {
      let someRepo = new SomeRepository()

      someRepo.getEncryptedValue(this.value)
        .then(response => {
          this.result = response.data.result
        })
    }
  }
}
</script>

如何将SomeRepository 作为依赖项传递？我的目标是我想在我的单元测试中模拟它。

我正在寻找一个简单的解决方案，最好是不涉及第三方库或样板的解决方案。

我也尝试过：

import Vue from 'vue'
import SomeRepository from '@/classes/SomeRepository'

Vue.use(SomeRepository)
// and
Vue.use(new SomeRepository())

这显然行不通（老实说，我没想到他们会这样做）。我也尝试关注这篇文章https://codeburst.io/dependency-injection-with-vue-js-f6b44a0dae6d，但我真的不喜欢每次我想使用依赖项时都必须创建一个 mixin 的方法。

我也考虑过将它作为道具传递，但在传递之前不确定在哪里实例化对象。

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

有很多方法可以模拟函数。我发现的最简单的方法是简单地接受依赖项作为函数的参数并替换要在测试中使用的函数。

方法示例

// Function
function func(dependency) {
  dependency.use()
}

// In App
func(dependency) // -> runs dependency.use

// In Tests
func(mockDependency) // -> runs mocked dependency.use

你的例子

一旦你知道了这个方法，你就可以做很多不同的版本，但要展示一个超级简单的版本。

encrypt() {
  this._encrypt(SomeRepository)
}
_encrypt (SomeRepository) {
  let someRepo = new SomeRepository()

  someRepo.getEncryptedValue(this.value)
    .then(response => {
      this.result = response.data.result
    })
}

您将使用模拟依赖项测试 _encrypt。

你也可以这样做。

encrypt (_SomeRepository=SomeRepository) {
  let someRepo = new _SomeRepository()

  someRepo.getEncryptedValue(this.value)
    .then(response => {
      this.result = response.data.result
    })
}

如果您传入模拟版本，它将使用它，如果您不这样做，它将使用真实版本。这个想法是使用这种方法，但你认为合适，但我认为你明白了。它超级简单，不需要魔法，也不需要库。

【讨论】：

【解决方案2】：

你应该使用 Vue 插件 https://vuejs.org/v2/guide/plugins.html 然后您可以通过例如访问它this.$someDeps

对于单元测试，您可以使用 Vue Test Utils https://vue-test-utils.vuejs.org/api/options.html#mocks 轻松模拟它

【讨论】：