时间戳

首页 > 解决方案 > 如何将依赖项传递给 Vue 组件？

javascript - 如何将依赖项传递给 Vue 组件？

问题描述

我有一个类，旨在用作使用 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 的方法。

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

标签： javascriptvue.jsvuejs2

解决方案

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

方法示例

// 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
    })
}

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

推荐阅读